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内 容 简 介 


本 书 全 面 介绍 了 Web 移动 应 用 开发 的 基本 技术 ,从 HTML 4. 01 十 CSS 十 JavaScript 的 网 站 开发 基础 到 最 新 的 
HTML 5 的 移动 特性 ,CSS 3 新 特征 ,增强 的 JavaScript API, 流行 的 Web 移动 应 用 开发 框架 BootStrap,jQuery Mobile， 
AngualrJS,NoSQL 的 MongoDB 数据 库 和 Node. js 全 栈 开 发 ,及 Web 混合 (Hybrid) 应 用 开发 框架 PhoneGap/Cordova， 
把 Web 的 应 用 重新 打包 编译 成 为 Android App 或 iOS App。 

全 书 共 分 为 5 篇 : 第 1 一 4 章 为 基础 篇 ,着 重 介绍 HTML 的 结构 和 基本 元 素 ,CSS 样式 布局 和 JavaScript 语言 的 编程 
技术 ; 第 5 一 17 章 为 进 阶 篇 ,着 重 讨论 最 新 发 布 的 HTML 5 标准 的 特性 ,语义 化 元 素 , 微 数据 / 微 格式 ,新 的 表单 元 素 和 
属性 , Web 字体 ,画图 ,文件 与 拖 放 技术 ,音频 视频 播放 技术 ,客户 端 数据 存储 和 数据 库 技术 ,离线 应 用 , Web Socket 通信 
与 多 线程 技术 。 同 时 ,也 介绍 了 CSS 3 的 新 特征 ,包括 透明 度 、 圆 角 、 阴 影 .背景 图 、 渐 变 、 过 渡 和 变换 特效 ,及 复杂 的 CSS 
3 选择 器 ; 第 18 一 24 章 为 移动 篇 ,重点 介绍 与 Web 移动 开发 相关 的 主要 技术 ,包括 移动 Web 响应 式 设计 和 BootStrap 框 
架 , 移 动 UI 设计 与 jQuery Mobile 类 库 , 移 动 测试 方法 ,及 移动 硬件 接口 编程 ,例如 ,地 理 位 置信 息 ,移动 设备 方向 接口 、 
屏幕 方向 接口 和 摄像 头 接口 的 编程 ; 第 25 章 为 全 栈 篇 ,利用 前 面 所 学 的 知识 (HTML 十 CSS 十 JavaScript) ,通过 MEAN 
(MongoDB 十 Express 十 AngularJS 十 Node. js) 框 架 整 合 技术 ,介绍 了 一 个 完整 的 Web 应 用 开发 过 程 ,包括 浏览 器 端 和 服 
务 器 端的 开发 (B/S 模式) 及 MVC 架构 的 开发 方法 ; 第 26 一 36 章 为 实 训 篇 ,介绍 了 10 个 Web 移动 开发 实验 ,包括 移动 
开发 环境 搭建 与 测试 ,地 理 位 置 与 地 图 ,WebSocket 通信 ,浏览 器 ,多 媒体 播放 器 制作 ,响应 式 Web 移动 设计 ,UI 设计 , 游 
戏 ,PhoneGap/Cordova 及 MEAN 全 栈 开发 实验 。 本 书 提供 了 大 量 应 用 实例 代码 ,每 章 后 均 有 拓展 练习 。 

本 书 适合 作为 应 用 技术 型 高 等 院 校 计算 机 、 软 件 工程 专业 高 年 级 学 生 选 用 教材 ,同时 也 适合 从 事 C/S 软件 开发 人 员 
转行 到 B/S 模式 的 Web 应 用 开发 ,或 从 传统 的 网 站 开发 转行 到 Web 移动 应 用 开发 ,及 广大 软件 编程 爱好 者 作为 参考 学 
习 用 书 。 
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PREFACE 


互联 网 的 出 现 可 谓 改 变 人 类 历史 进程 的 重大 发 明之 一 ,这 个 比 以 前 所 有 技术 都 要 强悍 
无 数 倍 的 新 发 明正 在 改变 着 人 类 活动 的 方方面面 。 从 经 济 结构 到 社会 组 织 , 从 管理 制度 到 
生活 方式 ,人 类 都 面临 着 互联 网 技术 强大 的 冲击 和 挑战 。 从 互联 网 技术 的 发 展 历程 看 , 正 从 
传统 的 Web 1.0 通过 Web 2.0 向 Web 3.0 方向 发 展 , 云 (计算 )、 物 (联网 )、 移 ( 动 互联 网 )、 
大 (数据 ). 智 ( 慧 城 市 ) 正 促使 新 的 互联 网 生态 的 形成 。 

随 着 智能 手机 的 普及 ,移动 端 开 发 越 来 越 受 到 业界 的 关注 。 早 在 2012 年 ,爱立信 就 预 
测 全 球 智能 手机 用 户 数量 到 2017 年 将 达到 30 亿 , 移 动 设备 的 数量 将 增长 到 90 亿 。 据 中 国 
互联 网 络 信息 中 心 (CNNIC) 发 布 的 第 40 次 (中 国 互 联网 络 发 展 状况 统计 报告 ) 统 计 , 截 至 
2017 年 6 月 ,我 国手 机 网 民 规模 达 7. 24 亿 , 较 2016 年 底 增加 2830 万 人 。 网 民 中 使 用 手机 
上 网 的 比例 由 2016 年 底 的 95.1% 提 升 至 96. 3% ,手机 上 网 比例 持续 提升 。 各 类 手机 应 用 
的 用 户 规模 不 断 上 升 ,场景 更 加 丰富 。 其 中 ,手机 外 卖 应 用 增长 最 为 迅速 ,用 户 规模 达到 
2.74 亿 , 较 2016 年 底 增长 41.4%; 移动 支付 用 户 规模 达 5. 02 亿 , 线 下 场景 使 用 特点 突出 ， 
4. 63 亿 网 民 在 线 下 消费 时 使 用 手机 进行 支付 。 因 此 ,手机 系统 的 应 用 开发 正 逐 渐 从 传统 的 
安 卓 .iOS, 转 向 了 移动 端 Web 开发 或 者 是 混合 开发 。《Web 移动 应 用 开发 教程 一 一 HTML 
5 十 JavaScript 框架 全 栈 App 开发 ) 的 出 版 可 谓 恰 关 其 时 、 应 运 而 生 。 

作为 应 用 技术 型 高 等 院 校 的 计算 机 类 教程 ,该 书 结构 合理 .内容 丰富 、 讲 练 结 合 .阐述 细 
致 。 其 特色 体现 在 : 

(1) 全 面 性 。 该 书 分 为 5 篇 ,分 别 是 基础 篇 、 进 阶 篇 移动 篇 、 全 栈 篇 和 实 训 篇 ,内 容 涉 
及 Web 移动 开发 的 几乎 所 有 内 容 , 无 论 是 传统 网 站 开发 的 技术 ,还 是 HTML 5 的 知识 , 直 
至 Web 混合 (Hybrid) 应 用 开发 框架 等 知识 都 完整 展现 。 

(2) 易 读 性 。 该 书 的 编写 结构 由 文字 、 图 表 和 代码 组 成 ,图 表 有 标题 注释 ,代码 配合 文 
字 说 明 。 并 且 提 供 完整 的 源 代码 ,每 一 个 章节 的 案例 代码 都 有 清晰 的 标注 位 置 ,方便 读者 很 
快 找到 源码 做 演示 。 

(3) 实用 性 。 该 书 并 无 枯燥 的 理论 阐释 ,特别 注重 可 操作 性 ,通过 简明 扼要 的 语言 
述 ,详细 讲解 移动 Web 开发 技术 中 各 个 知识 点 的 主要 内 容 。 不 仅 提供 了 大 量 应 用 实例 代 
码 ,每 章 后 还 有 拓展 练习 。 

自 1981 年 9 月 起 我 就 与 化 钢 老师 一 起 在 南京 大 学 学 习 、 工 作 , 尤 其 是 1987 年 工作 后 他 
的 重心 一 直 围 绕 系统 开发 .软件 设计 展开 ,参与 过 多 项 信息 系统 的 开发 项 目 ,并 获得 了 省 部 
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级 奖励 。20 世纪 90 年 代 , 化 钢 老 师 赴 澳 大 利 亚 进修 访问 ,在 加 拿 大 UBC 求学 并 获得 了 计 
算 机 硕士 学 位 ,还 在 加 拿 大 著名 的 黑莓 手机 公司 (Research in Motion) 工 作 过 。 随 着 祖国 改 
革 开 放 的 不 断 深 入 ,化 钢 老 师 毅 然 决然 放弃 了 加 拿 大 的 一 切 待遇 回国 创业 。 难 能 可 贵 的 是 ， 
化 钢 老 师 不 忘 初 心 ,最 终 还 是 选择 教书 育 人 这 一 崇高 职业 , 当 了 一 名 高 校 教师 ,一 直 从 事 计 
算 机 类 专业 教学 和 研究 ,开设 多 门 计算 机 类 课程 。 该 书 的 出 版 正 是 他 这 几 年 来 从 事 教学 、 科 
研 工作 成 果 的 集大成 之 作 。 

相信 该 书 的 出 版 不 仅 有 益 于 应 用 技术 型 高 等 院 校 计算 机 、 软 件 工程 专业 高 年 级 学 生 的 
课程 学 习 , 而 且 同 样 适 用 于 从 事 C/S 软件 开发 人 员 转 行 到 B/S 模式 的 Web 应 用 开发 ,或 从 
传统 的 网 站 开发 转行 到 Web 移动 应 用 开发 的 软件 开发 人 员 ,他 们 均 可 通过 该 书 的 学 习 快速 
掌握 Web 移动 应 用 开发 的 方法 和 技巧 ,特此 推荐 。 

是 为 序 。 


朱 庆 华 
国务 院 学 科 评议 组 成 员 
南京 大 学 信息 管理 学 院 教授 、 博 士 生 导师 
2018 年 1 月 
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FOREWORD 


自从 1981 年 IBM 公司 的 PC 问世 ,到 1990 年 Internet 从 校园 走向 商业 化 ,及 2007 年 
第 一 代 Apple iPhone 智能 手机 问世 ,计算 机 给 人 们 的 社会 生活 带 来 了 新 的 革命 ,计算 机 已 
经 不 是 仅 作为 数学 运算 的 工具 , 它 可 以 处 理 文字 ,处 理 图 形 数据 ,进行 数据 分 析 等 各 种 工作 ， 
甚至 可 能 成 为 智能 机 器 人 的 核心 部 件 。 随 着 计算 机 的 发 展 , 也 不 断 地 产生 各 种 学 科 领 域 。 
本 书 就 是 针对 Web 移动 应 用 领域 的 一 门 新 课程 ,基于 互联 网 在 移动 设备 上 的 Web 应 用 开 
发 教程 。 

早期 的 互联 网 仅 用 来 传递 信息 .电子 邮件 ,或 者 是 网 上 阅读 。 在 互联 网 上 ,浏览 器 看 到 
的 内 容 , 也 仅 能 叫 作 网 站 ,根本 不 能 与 C 语言 或 C++ 语言 开发 出 来 的 应 用 程序 相提并论 。 
例如 ,Sina 网 站 、163 网 站 ,都 是 以 内 容 服 务 为 主 的 门户 网 站 ,更 多 的 Web 应 用 也 就 是 博客 
和 论坛 及 电子 邮件 服务 。 由 于 Web 开发 的 网 站 所 用 的 语言 也 是 基于 排版 的 标记 语言 , 称 为 
HTML ,虽然 加 入 了 其 他 高 级 语言 的 支持 来 作为 服务 器 端的 脚本 语言 ,例如 基于 Java 的 
JSP、PHP、Ruby 等 ,但 是 由 于 互联 网 带宽 的 影响 ,一 直 没 有 能 达到 传统 应 用 系统 的 技术 
要 求 。 

但 是 到 了 今天 ,情况 大 大 不 一 样 了 。 首 先 , 网 络 技术 的 发 展 使 得 互联 网 带宽 不 断 提高 ， 
移动 技术 的 发 展 使 得 无 线 网 络 的 带宽 和 有 线 网 络 带宽 接近 。 同 时 ,计算 机 的 硬件 发 展 , 使 得 
计算 机 性 能 不 断 提 高 ,特别 是 移动 CPU 速度 ,运行 一 般 的 普通 应 用 程序 已 经 不 是 什么 障碍 
了 。 今天 一 台 智 能 手机 的 性 能 ,都 已 经 大 大 超过 十 年 前 的 一 个 台式 计算 机 。 况 且 , 现 在 的 硬 
件 设备 和 上 网 成 本 越 来 越 低 。 更 重要 的 是 ,人 类 社会 的 生活 已 经 完全 依赖 于 互联 网 ,例如 ， 
网 络 购物 \ 在 线 支 付 、 在 线 银行 等 应 用 已 经 完全 融入 人 们 的 生活 。 早 期 基于 浏览 器 的 Web 
网 站 是 以 内 容 为 管理 的 系统 ,已 经 不 适应 社会 的 发 展 需要 。 人 们 开始 要 求 更 多 的 以 浏览 器 
为 中 心 的 互联 网 服务 ,所 以 ,Web 应 用 开始 流行 。 人 们 开始 习惯 于 用 浏览 器 去 网 络 商店 购 
物 ,通过 浏览 器 订 机 票 火车 票 ,通过 浏览 器 处 理 个 人 的 银行 业务 。 到 2007 年 ,第 一 台 智 能 手 
机 iPhone 问世 ,人 类 迈 入 移动 互联 网 时 代 。 今 天 ,智能 手机 已 经 超越 台式 计算 机 ,逐步 普 
及 ,许多 的 基于 台式 计算 机 的 Web 应 用 开始 移植 到 智能 手机 上 。 但 是 ,由 于 基于 浏览 器 的 
计算 机 语言 的 滞后 发 展 , 很 多 移植 到 智能 手机 上 的 应 用 都 放弃 了 基于 浏览 器 的 框架 应 用 
(B/S) ,而 重新 回 到 传统 的 C/S 应 用 框架 上 ,并 放弃 了 以 HTML 为 主流 语言 的 Web 编程 ， 
而 改 用 手机 原生 语言 编程 ,例如 , 安 卓 的 Java、 苹 果 的 C-Objective。 而 作为 浏览 器 的 厂商 ， 
移动 Web 应 用 面临 严重 的 生死 存亡 的 考验 。 他 们 开始 组 建 联盟 ,修改 HTML 规则 ,使 
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HTML 有 着 与 其 他 高 级 计算 机 语言 同样 的 功能 ,从 而 促使 了 HTML 5 的 诞生 。 所 以 说 ,本 
书 提 到 的 HTML 5 技术 ,就 是 为 移动 设备 而 生 的 。 这 是 一 个 新 的 领域 ,虽然 还 有 许多 问题 
需要 解决 ,例如 ,基于 浏览 器 应 用 的 性 能 问题 。HTML 5 的 新 标准 在 2014 年 12 月 刚刚 公 
布 ,就 已 经 有 很 多 IT 巨头 公司 开始 关注 这 一 个 领域 ,并 把 自己 的 很 多 移动 应 用 采用 基于 
HTML 5 的 框架 来 重 写 ,例如 ,Facebook .Twitter 等 社交 应 用 软件 。 

本 书 分 为 5 大 部 分 : 基础 篇 . 进 阶 篇 、 移 动 篇 、 全 栈 篇 和 实 训 篇 。 基 础 篇 主要 回顾 和 巩 
固 学 习 HTML 十 CSS 十 JavaScript 传统 网 站 开发 的 三 种 语言 基础 知识 。 为 进一步 更 好 地 深 
入 学 习 理 解 HTML 5 做 好 准备 。 进 阶 篇 ,主要 学 习 HTML 5 的 新 特征 ,例如 ,语义 化 标签 、 
微 数据 、 微 格式 、Web 字体 、 强 大 的 表单 元 素 和 增强 的 属性 。 还 介绍 了 CSS 3 的 新 技术 , 例 
如 ,盒子 模式 的 特效 ,有 透明 度 、 圆 角 、 明 影 .背景 图 \ 渐 变 、 过 渡 和 变换 ,这 些 特技 以 前 都 是 靠 
复杂 的 JavaScript 编程 实现 的 ,现在 用 一 行 CSS 代码 就 可 以 了 。 在 进 阶 篇 还 介绍 了 强大 的 
JavaScript 的 编程 接口 扩展 ,例如 ,浏览 器 的 音频 视频 播放 API, 完 全 可 以 蔡 代 传统 的 Flash 
外 置 播放 器 ,WebSocket 通信 和 机制 编程 接口 和 Workers,JavaScript 的 多 线程 技术 ,及 浏览 
器 端 本 地 数据 库 接口 ,解决 了 早期 仅 靠 容 量 有 限 的 Cookie 存储 技术 。 甚 至 ,HTML 5 的 标 
准 制定 了 JavaScript 可 以 访问 客户 端的 文件 。 移 动 篇 主要 讨论 针对 移动 设备 的 JavaScript 
编程 接口 及 方法 ,移动 设备 的 优化 ,例如 ,响应 式 布局 。 还 介绍 了 移动 UI 设计 思想 ,及 一 些 
流行 的 JavaScript 框架 ,如 BootStrap 和 Mobile jQuery 等 ,介绍 移动 Web 应 用 的 测试 手段 
和 方法 。 最 后 ,介绍 PhoneGap/Cordova 混合 (Hybrid) 应 用 开发 ,把 基于 Web 的 应 用 转换 
成 移动 设备 的 原生 应 用 ,例如 ,Android App。 全 栈 篇 涉及 服务 器 端 脚本 的 编写 。 得 益 于 
Node.js 的 推出 ,让 JavaScript 这 个 前 端 辅助 计算 机 语言 成 为 一 个 全 能 语言 ,实现 了 让 
JavaScript 在 服务 器 上 和 运行。 结合 前 面 学 习 的 知识 ,利用 最 流行 的 MEAN 开发 架构 ,来 开 
发 一 个 完整 的 B/S 架构 的 Web 应 用 。MEAN 是 由 MongoDB(NoSQL 数据 库 ) 十 Express 
(Web 模块 ) 十 AngularJS( 前 端 MVC 框架 ) 十 NodeJS(JavaScript 服务 器 端 运 行 环境 )4 个 
组 合 形成 的 Web 开发 架构 ,是 对 传统 Web 开发 的 LAMP(Linux 十 Apache 十 MySQL 十 
PHP) 架 构 的 新 挑战 。 实 训 篇 中 ,我 们 会 鼓励 学 生 组 建 学 习 小 组 ,按照 企业 团队 开发 模式 学 
习 项 目的 开发 ,首先 学 会 自己 动手 搭建 移动 开发 环境 ,学 习 利用 浏览 器 的 开发 工具 ,根据 前 
面 四 个 部 分 的 学 习 内 容 , 动 手 编写 .修改 和 运行 课程 里 面 的 应 用 实例 代码 ,及 做 一 些小 的 
Web 应 用 软件 项 目 。 有 许多 Web 项 目 是 开源 的 ,可 以 在 网 上 下 载 ,通过 修改 这 些 开源 代码 
来 学 习 。 通 过 实验 ,可 以 让 学 生 接触 更 多 的 最 新 技术 ,掌握 最 新 编程 技能 ,达到 培养 应 用 型 
的 人 才 的 目标 。 

作为 应 用 型 技术 大 学 的 教程 ,本 书 侧重 于 编程 技能 的 培养 。 所 以 ,每 一 章 都 有 大 量 的 案 
例 代 码 来 辅助 学 习 。 与 传统 课程 不 同 ,应 用 技术 型 课程 不 是 以 应 试 为 目的 的 ,而 是 侧重 于 掌 
握 实际 技能 ,所 以 ,每 一 章 还 有 结合 本 书 案例 的 课堂 编程 练习 ,让 学 生 一 边 学 习 一 边 动手 写 
代码 ,基本 是 以 代码 为 驱动 的 学 习 模 式 。 本 书 的 读者 对 象 ,要 求 是 具有 面向 对 象 编程 基础 及 
数据 库 知识 的 学 生 ,准备 提升 进入 Web 移动 应 用 领域 开发 的 传统 Web 网 站 开发 人 员 。 

由 于 HTML 5 在 正式 发 布 标准 前 ,许多 浏览 器 厂商 如 Firefox、Google Chrome、Opera、 
Safari 4 十 IE 9/10/11 都 已 经 有 不 同 程度 的 支持 HTML 5, 但 是 并 没有 统一 标准 ,所 以 在 代 
码 演示 时 ,可 能 出 现 兼 容 问 题 ,希望 本 书 的 学 习 者 检查 自己 的 开发 环境 ,把 浏览 器 安装 版 本 
升级 到 2015 年 以 上 ,如 果 发 生 兼容 问题 ,可 以 尝试 用 不 同 的 浏览 器 做 测试 。 大 多 数 的 代码 





前 言 


都 可 以 在 台式 计算 机 上 完美 运行 ,如 果 有 些 测试 需要 在 手机 上 完成 ,也 希望 手机 操作 系统 的 
版 本 是 2015 年 以 后 发 行 的 。 由 于 本 书 引 用 了 一 些 流行 的 JavaScript 框架 , 例如 ， 
BootStrap、AngularJS 等 ,这 些 新 技术 更 新 很 快 ,作为 新 技术 的 入 门 引 导 , 让 学 习 者 接触 和 
了 解 行业 的 一 些 流行 Web 开发 框架 技术 ,虽然 涉及 这 些 框架 的 演示 代码 都 是 经 过 精心 调 
试 ,可 以 正常 运行 ,但 是 ,如 果 遇 到 问题 ,可 能 是 框架 版 本 有 重大 变动 ,请 到 官网 阅读 更 新 文 
档 , 给 代码 做 出 相应 调整 ,同时 也 锻炼 自己 分 析 问 题 , 解 决 问题 的 能 力 。 

本 书 的 编写 结构 是 由 文字 、 图 表 和 代码 组 成 ,图 表 有 标题 注释 ,代码 配合 文字 说 明 , 没 有 
标题 注释 。 课 程 提供 完整 的 源 代码 ,每 一 个 章节 的 案例 代码 都 有 清晰 的 标注 位 置 , 方 便 读者 
很 快 找到 源码 做 演示 。 


编 者 
2018 年 5 月 1 日 
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早期 的 计算 机 显示 是 字符 方式 ,所 以 ,早期 的 计算 机 语言 和 
用 户 界面 比较 简单 ,也 就 是 以 命令 行 方式 进行 人 机 交互 。 一 直到 
Windows 图 形 操 作 系 统 出 现 以 后 ,程序 的 用 户 界面 才 得 到 了 改 
善 。 这 种 界面 不 以 字符 行 的 形式 出 现 ,而 是 以 图 形 界面 出 现 , 也 
就 是 有 了 菜单 ,按钮 工具 栏 等 控制 界面 。 计 算 机 语言 擅长 于 数据 
处 理 , 而 文字 处 理由 另外 一 种 排版 语言 完成 。 互 联网 和 浏览 器 的 
出 现 ,让 人 们 的 软件 开发 观念 产生 革命 。 我 们 不 仅 要 求 软件 有 漂 
亮 的 外 观 , 还 要 有 强大 的 数据 处 理 能 力 。 今 天 , 随 着 网 络 速度 的 
提升 ,基于 Web 的 应 用 有 可 能 会 替代 所 有 传统 的 软件 应 用 。 

早期 的 互联 网 主要 通过 网 络 传送 文字 信息 ,浏览 器 作为 一 个 
接收 信息 并 显示 信息 的 工具 ,为 了 让 文字 的 显示 更 像 报纸 ,引入 
了 排版 风格 的 语言 ,这 种 语言 最 早 用 在 DOS 操作 系统 下 的 文字 
处 理 程序 WordStar 中 ,排版 格式 由 Ctrl 键 加 几 个 其 他 键 组 合 控 
制 ,到 了 Windows 时 代 , 微 软 的 Word 采用 了 “所 得 即 所 见 ” 的 技 
术 , 这 样 在 文本 里 面 的 组 合 键 被 隐藏 起 来 。 今 天 我 们 还 能 看 到 的 
这 种 排版 语言 是 由 W3C 组 织 定 义 的 HTML。 

在 基础 篇 里 ,将 学 习 什么 是 基于 Web 的 应 用 ,了 解 Web 的 跨 
平台 开发 架构 ,学 习 Web 开发 最 基本 的 HTML、CSS 和 JavaScript 
语言 和 JavaScript 常用 的 Ajax 异步 通信 技术 ,简洁 的 jQuery 库 和 
流行 的 JSON 数据 交换 格式 。 


书 山 有 路 勤 为 径 ,学 海 无 涯 苦 作 舟 





Web 开 发 概念 和 构架 


1.1 静态 网 页 与 动态 网 页 


HTML 作为 描述 语言 ,只 是 描述 网 页 显示 的 格式 ,早期 的 网 站 只 提供 阅读 ,所 以 将 可 以 
从 互联 网 读 取 HTML 格式 文件 的 程序 称 为 “浏览 器 ”。 动 态 网 页 是 在 HTML 中 内 入 程序 ， 
达到 人 机 交互 ,数据 动态 更 新 , 如 聊天 室 、 论 坛 ,所 有 浏览 器 都 引入 JavaScript 作为 交互 


语言 。 


1.2 描述 标记 语言 与 脚本 语言 


HTML、XML(Extensible Markup Language) ,参数 文件 等 都 称 作 描述 语言 ,它们 只 做 
数据 的 描述 ,而 没有 行为 发 生 。 

脚本 (Script) 语 言 ,是 可 以 执行 的 命令 集 , 与 C 和 Java 语 言 比 ， a le 天 的 语法 结构 ， 
在 特殊 的 应 用 程序 支持 下 运行 ,如 MS DOS 命令 ,UNIX 的 C Shell、Perl .运行 在 浏览 器 里 
的 JavaScript。 


1.3 解释 语言 与 编译 语言 

解释 语言 是 通过 “翻译 引擎 ”一边 读 取 源 程序 代码 ,一 边 执行 程序 命令 。 大 多 数 脚本 语 
言 是 解释 语言 ,如 JavaScript、Perl、PHP、Ruby。 

编译 语言 是 将 源 程序 预先 编译 成 目标 代码 (机 器 编码 ) , 称 之 为 可 执行 程序 ,大 多 可 执行 
程序 可 以 直接 在 操作 系统 下 运行 ,如 C/C++ 、Java 必须 在 虚拟 机 下 运行 。 

编译 语言 程序 的 执行 速度 要 比 解释 语言 的 快 。 
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1.4 跨 操 作 系统 平台 语言 


由 于 计算 机 存在 不 同 的 操作 系统 ,如 UNIX、Linux、Windows 和 Mac OS X, 不 同 语言 
开发 的 程序 会 与 操作 系统 存在 兼容 性 问题 。 例 如 , Windows 下 用 C++ 开发 的 程序 不 可 能 在 
UNIX 下 运行 。 

所 以 , 跨 平台 计算 机 语言 是 指 不 用 修改 源 程序 ,就 可 以 在 不 同类 型 操作 系统 下 运行 ,如 
JavaScript . HTML Java。 

其 实 , 互 联网 的 跨 平台 网 络 ,造就 了 跨 平台 计算 机 语言 的 诞生 。 


1.5 软件 开发 构架 


1.5.1 服务 器 端 与 客户 端 软件 构架 (C/S) 


计算 机 网 络 的 模式 是 把 每 个 节点 的 计算 机 分 成 服务 器 和 客户 机 。 服 务 器 是 集中 处 理 信 
息 \ 存 储 文件 .集中 计算 的 机 器 ,服务 器 将 所 有 来 自 客户 机 的 服务 处 理 后 ,把 结果 送 回 客户 
机 ,如 图 1-1 所 示 。 


Q 服务 器 


























图 1-1 C/S 软件 构架 


这 种 基于 服务 器 应 用 程序 和 客户 端 应 用 程序 的 软件 构架 ,形成 我 们 今天 看 到 的 瘦 客 
户 机 终端 ,由 于 客户 端 无 须 做 大 量 的 运算 处 理 , 客 户 端 的 硬件 要 求 不 高 ,从 而 节约 了 硬件 
成 本 。 例 如 ,QQ 聊天 软件 以 及 需要 下 载 安装 在 客户 端的 网 络 游戏 都 是 基于 C/S 的 应 用 
构架 。 


1.5.2 Web(B/S) 的 软件 构架 


互联 网 的 兴起 也 让 计算 机 语言 按 机 器 类 型 分 家 。 所 以 ,有 了 运行 于 服务 器 端的 计算 机 
语言 ,如 ASP(Active Server Pages) JSP(Java Server Pages) .PHP 和 专门 运行 于 客户 机 的 
计算 机 语言 ,如 HTML(CSS) JavaScript。 这 种 基于 服务 器 (Server) 和 浏览 器 (Browser) 的 
软件 构架 就 是 本 书 要 学 习 的 软件 开发 方式 Web(B/S) 的 软件 构架 。 

基于 Web 的 应 用 系统 工作 原理 如 图 1-2 所 示 。 

客户 端 通过 互联 网 发 出 HTTP 请 求 ,服务 器 将 HTML 页 面 文件 上 传 给 客户 端 ,客户 端 
浏览 器 处 理 收 到 的 HTML 页 面 ,并 显示 格式 化 的 Web 页 面 。 
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HTML/JavaScript 
显示 输出 


< 





图 1-2 B/S 软件 构架 原理 


1.6 HTTP 


每 个 网 站 服务 器 都 有 一 个 存放 网 页 文件 的 地 方 , 称 为 Web 根 目 录 (Root Web Directory)。 
在 浏览 器 端 ,通过 输入 URL(Unified Resource Location) 就 可 以 从 Web 服务 器 端 加 载 网 页 
文件 到 客户 端的 浏览 器 里 ,URL 格式 : protocol://hostname/locator, 如 图 1-3 所 示 。 


uloN/ANAAA Tol eel /de [E:T /A 






协议 .http， 
域名 ， 主 机 名 ，IP 


图 1-3 URL 格式 说 明 


index. html 或 index. htm 是 默认 的 首页 ,如 果 只 输入 URL 的 域名 地 址 ,例如 www. 
ibm. com, 就 直接 打开 index. html。 当 然 .WWW 服务 器 可 以 修改 默认 的 首页 文件 设置 。 

HTPP 通过 Internet 的 TCP 可 靠 连 接 和 协议 端口 80 在 服务 器 和 浏览 器 间 建 立 传输 。 
HTTP 最 新 版 本 是 HTTP/1. 1。 


1.6.1 HTTP 请 求 包 


HTTP 请 求 (Request) 包 是 浏览 器 向 服务 器 发 送 的 数据 包 , 其 基本 构成 是 : 方法 十 URI 
(Uniform Resource Identifier) 十 请 求 头 十 正文 。 一 个 具体 的 包头 如 图 1-4 所 示 。 







et, post, head, 


option, 人 Pit) 访问 的 网 页 文件 http 版 本 


日 
9 [Expert Info (Chat/Sequence): GET /ntes.js HTTP/1.1\r\n] 
Request Method: GET 
Request URI: /ntes.js 
Request Version: HTTP/1.1 
Accept: */*\r\n 
Referer: http://ww.163.com/\r\n 
Accept-Language: en-CA\r\n 
[truncated] User-Agent: Mozi11a/4.0 (compatible; MSIE 8.0; Windows NT 6.1; 
Accept-Encoding: gzip, deflate\r\n 
Host: analytics.163.com\r\n 
Connection: Keep-Alive\r\n 
\rn 
iu 四 1vti is] 


图 1-4 HTTP 的 请 求 包 结构 
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请 求 方法 (Method) 是 HTTP 的 一 个 主要 组 成 部 分 , 它 告诉 服务 器 这 个 请 求 让 服务 器 
做 什么 事情 ,部 分 请 求 方法 具体 含义 如 下 。 

(1) get: 请 求 一 个 服务 器 的 资源 ,例如 ,HTML 或 图 片 文件 ,可 以 在 URL 地 址 中 带 查 
询 参 数 , 并 且 在 浏览 器 端的 URL 栏 可 以 看 到 查询 的 参数 ,例如 : http://www. domain. 
com?name 一 Joe? password 王 1234, 这 种 方式 的 安全 性 较 差 。 

(2) post: 与 get 方法 相同 ,动态 访问 服务 器 的 资源 ,但 是 略 有 不 同 的 是 ,get 方法 的 数 
据 是 直接 写 在 URL 里 面 ,而 post 的 数据 参数 是 在 请 求 包 的 正文 里 面 。post 方法 安全 性 较 
好 ,适合 带 复杂 、 量 大 的 数据 的 请 求 。 

(3) put: 修改 服务 器 资源 ,如 果 服 务 器 不 存在 请 求 修改 的 资源 ,服务 器 会 创建 新 的 资 
源 ,如果 资 源 被 修改 ,服务 器 返回 状态 码 200(ok) ,201( 创 建新 内 容 ) 或 204( 没 有 内 容 修改 ) 。 

(4) delete: 请 求 服务 器 删除 URI 指 定 的 资源 ,202 状态 码 表示 指定 的 资源 没有 被 删除 。 

(5) head: 相当 于 get 的 请 求 方法 ,但 是 服务 器 只 返回 响应 包 的 头 , 不 带 正文 。 这 个 方 
法 适合 查询 资源 的 信息 ,而 不 需要 资源 的 具体 内 容 。 

(6) option: 查询 服务 器 的 服务 功能 ,而 不 是 请 求 一 个 资源 ,服务 器 返回 可 以 支持 的 
HTTP 请 求 方法 。 

在 请 求 包 头 里 面 的 一 个 重要 参数 是 用 户 代理 (user-agent) ,里 面包 含 客 户 端 的 一 些 计 算 机 
信息 和 浏览 器 信息 。Web 开发 最 常用 的 方法 是 通过 user-agent 提供 的 信息 来 知道 客户 端的 请 
求 是 来 自 于 桌面 计算 机 ,还 是 移动 设备 ,以 及 时 切换 移动 服务 。user-agent 包括 的 信息 如 下 。 

(1) 浏览 器 名 称 /版 本 : 例如 ,Mozilla/4.0。 

(2) 操作 系统 及 版 本 : 例如 ,Windows NT 6. 1。 

(3) 历史 及 兼容 浏览 器 : 例如 ,兼容 IE 8.0。 

(4) HTML 引擎 : 例如 ,AppleWebKit/535. 2、Tredent/3. 3。 


1.6.2 HTTP 响应 包 


HTTP 响应 (Response) 包 是 服务 器 发 回 浏览 器 的 数据 包 , 其 基本 构成 是 : 协议 版 本 十 
状态 码 十 状态 描述 十 应 答 头 十 正文 ,如 图 1-5 所 示 。 

响应 包 包含 一 个 重要 的 信息 是 通信 的 状态 机 
码 和 状态 描述 ,来 告诉 浏览 器 请 求 完成 的 情况 。 | “IEeert Info Crag/seavence)s WTA 200 ON 
状态 码 由 三 位 数组 成 ,第 一 个 数字 表示 一 组 状态 | Rsesgiae ox 
的 含义 ,1X X 表 示 临 时 响应 ,2X X 表示 成 功 ，| 光合 


ee 表示 重 定向 本 表示 请 求 错误 ,5 ww 表 Connection: keep-alive\r\n 


Vary: Accept-Encoding\r\n 
Content-Encoding: gzip\r\n 








示 服 务 器 错误 。 常 用 状态 码 含义 如 下 。 CN 

(1) 200(OK): 一 切 正常 。 表 示 HTTP 通 
信 正 党 图 1-5 _ HTTP 响应 包 结构 
Fi o 


(2) 302(Found) : 已 经 找到 。 表 示 找 到 相关 资源 。 

(3) 403(Forbidden) : 禁止 访问 。 由 于 访问 权限 等 安全 原因 ,禁止 访问 一 些 资源 文件 。 
(4) 404(FilenotFound) : 文件 没有 找到 。 表 示 请 求 的 文件 不 在 服务 器 里 面 。 

(5) 500(InternalServerError) : 服务 器 内 部 出 错 。 一 般 表示 服务 器 端 脚本 运行 错误 。 
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1.7 ”Web 应 用 的 开发 环境 


1.7.1 Web 服务 器 


许多 Web 服务 器 是 开源 或 是 免费 的 ,用 得 最 多 的 是 Apache Web 服务 器 ,可 以 安装 在 
Windows 和 Linux 操作 系统 ,除了 Web 服务 器 ,一 般 网 站 还 要 有 数据 库 , 例 如 用 得 最 多 的 
MySQL 数据 库 , 以 及 服务 器 端的 脚本 运行 环境 ,例如 Java Web(JSP)、PHP, 所 以 要 安装 这 
些 脚 本 的 运行 环境 。 产 品级 的 服务 器 需要 做 很 多 设置 ,这 是 服务 器 管理 员 的 事情 , 作为 
Web 应 用 的 开发 人 员 ,也 要 了 解 基 本 的 Web 服务 器 的 搭建 ,来 满足 代码 的 开发 测试 。 但 
是 ,在 开发 阶段 ,一 台 机 器 既 可 以 是 服务 器 也 可 以 是 客户 端 ,所 以 ,开发 阶段 的 服务 器 搭建 ， 
越 简 单 越 好 ,这 里 有 很 多 一 次 性 安装 而 无 须 进 行 复杂 设置 的 Web 服务 器 集成 软件 ,而 且 很 
多 是 免费 的 。 例 如 , Apache Tomcat、 集 成 JSP 运行 环境 \.WAMP(Windows 操作 系统 ， 
Apache Web 服务 器 ,MySQL 数据库,PHP 解释 引擎 ) ,及 XAMPP 都 是 非常 容易 安装 使 用 
的 ,在 Windows 操作 系统 下 运行 的 Web 服务 器 工具 。 如 果 喜 欢 Linux 的 Web 开发 环境 ， 
可 以 用 LAMP(Linux 十 Apache 十 MySQL 十 PHP) 搭 建 Web 开发 环境 。 本 书 使 用 WAMP， 
在 Windows 操作 系统 下 搭建 Web 的 开发 环境 (具体 的 安装 使 用 请 看 实 训 篇 )。 


1.7.2 浏览 器 


浏览 器 是 运行 Web 应 用 的 平台 ,通过 HTTP 网 络 协议 与 服务 器 建立 联系 ,构建 整个 
Web 应 用 系统 。 在 开发 阶段 ,建议 使 用 微软 的 IE、Google( 谷 歌 ) 的 Chrome 和 Mozilla 的 
Firefox( 火 狐 ) ,最 好 下 载 安装 最 新 版 本 的 浏览 器 。 以 上 浏览 器 都 会 带 Developer( 开 发 者 ) 
插件 ,这 是 用 来 调试 网 页 的 一 个 常用 工具 (具体 使 用 请 看 实 训 篇 )。Chrome 和 Firefox 还 内 
置 了 web 移动 开发 的 插件 工具 来 模拟 移动 设备 的 浏览 器 环境 。 


1.7.3 代码 编程 工具 


最 简单 的 Web 代码 编辑 器 可 以 是 任何 文本 编辑 器 ,例如 ,微软 Windows 系统 自 带 的 
Notepad( 记 事 本 ), 但 是 不 推荐 使 用 。 这 里 推荐 一 些 常 用 的 、 简 单 的 专业 程序 编辑 器 ,很 多 
也 是 免费 的 。 例 如 ,Notepad 十 十 (免费 )、Adobe Brackets( 免 费 ) .EditPlus( 付 费 ) 、SubLime 
Text( 评 估 版 ,试用 版 或 付费 ) .Pspad( 免 费 )、TextPad( 评 估 版 ,试用 版 或 付费 )。 

当然 还 有 更 强大 的 软件 集成 开发 工具 ,例如 Eclipse 和 Netbeans。 男 外 ,还 有 所 见 即 所 
得 的 网 页 编辑 器 Adobe Dreamweaver。 但 是 ,本 书 推荐 使 用 Notepad 十 十 或 Sublime 代码 
编辑 器 ,目的 就 是 希望 读者 可 以 直接 编写 ,接触 源 代码 ,而 不 是 所 见 即 所 得 的 网 页 编辑 。 


练习 


1. 下 载 安装 两 个 本 书 推荐 的 代码 编辑 器 ,分别 比 较 其 功能 差别 ,了 解 什么 是 语法 加 亮 
和 语法 提示 ,它们 支持 哪些 计算 机 语言 。 
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2. 下 载 安 装 一 个 最 新 版 的 Firefox 浏览 器 ,访问 www. baidu. com, 通 过 开发 者 工具 , 查 
看 https://www. baidu. com 的 请 求 头 和 响应 头 的 包 结 构 。 

3. 下 载 安 装 WAMP 服务 器 ,启动 服务 器 ,通过 浏览 器 访问 http://localhost, 用 浏览 器 
的 开发 者 工具 的 网 络 (Network) 选 项 卡 ,查看 哪些 文件 从 服务 器 下 载 到 浏览 器 端 。 到 
WAMP 安装 目录 下 的 www 目录 中 找到 对 应 的 文件 。 


HTML 基 本 结构 


2.1 最 简单 的 HTML 页 面 结构 

HTML(HyperText Markup Language) 是 一 种 排版 语言 ,也 叫 超 文本 标记 语言 。 
HTML 文档 由 标签 和 属性 组 成 。 标 签 有 开始 标签 和 结束 标签 配对 ,每 个 开始 标签 都 可 以 包 
含 属 性 设置 。 代 码 如 下 : 





<!DOCTYPE html > 

<html> 

<head></head> 

< body > 你 好 HTML!</body> 
</html > 











从 以 上 代码 可 以 看 到 ,HTML 文档 主要 由 以 下 4 大 部 分 组 成 。 

(1) <! DOCTYPE html > 文档 声明 标签 ,浏览 器 检测 到 这 个 文档 声明 后 会 启用 标准 
HTML 解释 引擎 ,否则 浏览 器 采用 非 标准 HTML 解释 。HTML 4. 01 版 本 的 声明 比较 复 
杂 , 这 里 用 的 是 HTML 5 版 本 的 声明 格式 。 

(2) <html > 标签 ,也 是 HTML 文档 的 根 节点 ,是 HTML 文档 必须 有 的 第 一 个 标签 ,所 
有 其 他 标签 都 在 这 个 标签 内 嵌 套 。 

(3) < head > 标签 也 叫 文档 头 , 用 来 放置 文档 的 一 些 参数 定义 ,例如 ,CSS 样式 定义 、 
JavaScript 代码 等 。 这 些 内 容 都 不 在 页 面 里 显示 。 

(4) <body > 标签 也 叫 文档 正文 ,所 有 在 文档 中 显示 的 内 容 都 放 在 这 个 标签 下 。 包 括 
JavaScript 代码 的 执行 结果 都 在 这 里 显示 。 

标签 可 以 嵌 套 ,上 一 层 标 签 称 为 父 标签 ,下 一 级 标签 称 为 子 标 签 , 如 图 2-1 所 示 。 

标签 不 可 以 交叉 嵌 套 ,如 图 2-2 所 示 。 
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<html> 
<head> 一 一 
bin </head> 一 一 
<head> — 
Ahead> | ea 
<body> 一 一 一 一 一 一 一 <p> ”一 
2 </body> 一 上 一 
<p> 一 
<Jbody> 一 一 一 一 一 2 
</html> </html> 
图 2-1 HTML 的 赃 套 格式 图 2-2 HTML 错误 的 嵌 套 


2.2 HTML 基本 语法 


HTML 不 实施 严格 的 语法 规则 ,大 多 数 浏览 器 不 会 显示 HTML 的 语法 错误 ,但 是 ， 
HTML 的 语法 错误 可 能 会 造成 不 正常 的 显示 内 容 。HTML 主要 语法 规则 如 下 。 

(1) 标签 和 属性 不 区 分 大 小 写 。 

(2) 属性 值 可 以 不 加 引号 *”, 但 是 属性 值 含有 空格 时 要 加 引号 。 





<p class = "rqd rd"> 你 好 !</p> 











(3) 一 个 属性 可 以 有 多 个 值 ,例如 class 属性 可 以 有 多 个 值 ,每 个 值 用 空格 分 开 。 
(4) 布尔 值 属性 可 以 不 赋值 ,定义 就 表示 真 。 





< input type = "checkbox" checked > 红色 </input> 





(5) 可 以 省 简略 关闭 标签 ,但 是 要 在 开始 标签 右 括号 前 加 闭合 符号 />”。 





<meta charset = "utf -8" /> 











(6) HTML 不 认识 回 车 换行 ,要 用 换行 标签 < br >,< br > 是 没有 关闭 标签 的 特殊 标签 ， 
又 可 以 表示 为 < br/>。 
(7) 注释 ,也 是 以 标签 的 形式 出 现 的 : <!-- 注 释 内 容 ->。 


2.3 HTML 标签 与 属性 


HTML 基本 上 是 由 标签 与 属性 组 成 。 标签 ( 元 素 ) 可 以 I 
带 属 性 ,属性 用 来 描述 标签 的 特征 ,属性 必须 放 在 开始 标签 里 
面 定义 ,如 图 2-3 所 示 。 

标签 元 素 属性 基本 可 以 分 成 以 下 三 类 。 图 2-3 HTML 标签 和 属性 结构 


标签 元 素 ”属性 名 ”属性 值 

















第 2 章 ”HTML 基 本 结构 | 


(1) 全 局 属性 : 适合 任何 标签 元 素 ,例如 ,class.id、style。 
(2) 只 针对 某 个 元 素 的 属性 : 例如 href,< a href 二 "www. qq. com"> 腾 讯 </a >。 


(3) 事件 属性 : 例如 onmouseover,< a href 二 "www. qq. com"onmouseover 一 function () 





{alert("www. qq. com" ) ;) > 腾讯 </a >。 


2.4 HTML 特殊 符号 与 转 义 符 


在 网 页 中 的 内 容 不 允许 使 用 与 HTML 语法 中 相同 的 符号 。 

(1D 由 于 HTML 语法 使 用 了 一 些 符号 ,要 显示 这 些 符号 必须 用 转 义 字符 "&”, 加 上 英 
文 缩写 及 分 号 *;”。 例 如 *<" 用 *&lt",“>" 用 *&-gt" 表 示 。 

(2) HTML 页 面 只 认识 一 个 空格 ,加 入 多 个 空格 可 用 *“&nbsp” 表 示 一 个 空格 。 

(3) 特殊 符号 ,无 法 用 键盘 输入 的 字符 比如 版 权 符号 可 用 *&copy" 表 示 , 会 自动 转换 成 
版 权 符号 ©。 





2.5 HTML 网 页 的 语言 定义 


以 下 代码 设 定 网 页 内 容 所 使 用 的 主要 语言 ,例如 ,其 中 ,lang 二 "zh" ,zh 表示 中 文 , 英 文 
是 en, 设 定 字 符 集 charset 二 "utf-8"。 





< html lang= "zh" > 

< head> 

<meta charset = "utf — 8"/> 
</head> 











其 实 , 在 网 页 里 面 不 定义 lang 属性 一 样 可 以 显示 各 种 文字 ,lang 属性 主要 是 让 搜索 引 
获知 道 网 页 的 主要 语言 。 最 早 的 计算 机 字符 编码 是 ASCII 码 , 只 能 支持 英文 和 标点 符号 、 
功能 符 。 计 算 机 在 中 国 应 用 后 ,中 国 制定 了 中 文字 符 集 编码 ,有 GB2312( 国 标 简 体 字 ) .GB5 
(繁体 ).GBK( 简 繁体 )。 国 际 标准 化 组 织 制定 了 UTF-8( 世 界 统一 字符 集 ) ,将 世界 上 的 主 
要 语言 一 起 编写 到 一 个 字符 集 里 面 。 设 定 字 符 集 很 重要 ,浏览 器 通过 这 个 属性 正常 显示 不 
同 的 文字 ,否则 会 出 现 乱 码 。 


2.6 HTML 标签 元 素 的 属性 详解 


标签 的 属性 基本 有 以 下 几 个 特点 。 
(1) 最 常用 的 就 是 通过 标签 属性 改变 文本 外 观 , 见 例子 2-1。 








ee 
例子 2-1: 
partl/ch2/properties/ 

propl. html 


<body text = "red"> 给 所 有 文字 加 红色 
<p><font color = "yellow"> 文 字 加 黄色 </font ></p> 
<p><font color = "blue"> 文 字 加 蓝 色 </font ></p> 











12 1 移动 Web 应 用 开发 教程 一 -HTML 5+JavaScript 框 架 全 栈 App 开 发 


























(2) 通过 src 属性 来 引用 外 部 文件 。 如 下 是 引用 图 形 文件 qq. jpg, 引 用 外 部 JS 文件 


my.js。 








< img src = "imges/qq. jpg"></img> 
< script src= "js/my. js"></script> 








(3) 子 标签 可 以 覆盖 父 标签 定义 的 属性 。 
(4) 通过 < meta > 元 数据 标签 给 网 页 设置 参数 ,例如 字符 编码 设置 。 





< met: 





< head > 
<meta charset = "utf ~ 8"></meta> 


< head> 


a name = "author" content = "Joe Zhou"></meta> 








(5) < meta > 标签 还 可 以 通过 name 属性 定义 数据 类 型 ,通过 content 属性 声明 值 。 互 
联网 的 搜索 引擎 可 以 检索 到 这 些 参数 ,meta 还 有 针对 移动 设备 的 属性 定义 。 


2.7 HTML 常用 标签 


2.7.1 <form > 表单 标签 
表单 用 来 接收 用 户 输入 的 数据 ,提交 给 服务 器 处 理 。 





用 户 : 


密码 : 





< form action = "login. php" method = "post"> 
<br /> 


</form> 


< input type = "text" name = "user"> 


< input type = "password" name = "password"> 





<input > 标签 定义 输入 域 ,其 type 属性 定义 输入 的 数据 类 型 ,name 定义 输入 域 的 





名 字 ( 相 当 于 计算 机 语言 的 变量 名 ) ,用 value 给 name 预 赋 值 。 主 要 数据 类 型 有 以 下 


几 种 。 


(1) text: 文本 行 ,如 果 要 输入 多 行文 本 要 用 < textarea >。 


(2) Pp: 
(3) b 


assword: 密码 ,在 密码 域 中 输入 字符 时 , 仅 显 示 项 目 符号 “@”。 
utton: 按钮 。 














(4) checkbox: 复 选 框 口 。 定 义 属性 checked 表示 勾 选 。 
(5) radio: 单 选 框 O。 定 义 属 性 checked 表示 勾 选 。 


2.7. 
表格 月 


2 < table > 表格 标签 





日 于 在 网 页 上 显示 格式 化 的 数据 , 见 例子 2-2。 








<table> 
<tr> 

<th> 姓 名 </th>< th> 性 别 </th>< th> 电 话 </th> 
</tr> 
所 二 六 

<td> 李 明 </td><td> 男 </td><td> 5643221 </td> 
</tr> 
tr 

< td> 王 英 </td>< td> 女 </td>< td> 5655662 </td> 
</tr> 
</table> 








表格 由 以 下 主要 标签 组 成 。 
(1) <tr>: 表 的 水 平 栏 标签 。 
(2) < td>: 表 数 据 格 标 签 。 
(3) <th>: 表 头 格 标签 。 


2.7.3 <div> 和 < span > 区 块 标签 
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mnqm 〇 mqQé 呈 me 
例子 2-2: 
part1l/ch2/table-form/ 

table. html 





在 一 个 网 页 中 ,可 以 把 网 页 分 成 不 同 的 物理 区 块 ,并 有 固定 的 位 置 , 这 就 用 到 区 块 标签 。 


DIV 十 CSS 常常 用 来 表示 一 种 页 面 的 布局 方式 ,也 就 是 相对 于 用 表格 的 布局 方式 。DIV 十 
CSS 布局 方式 比较 流行 ,是 因为 它 的 灵活 性 ,特别 是 在 移动 应 用 中 ,可 以 根据 智能 设备 的 屏 
幕 宽度 来 灵活 改变 布局 。 区 块 使 用 规则 如 下 。 


(1) 任何 元 素 都 可 以 看 作 区 块 ,并 可 以 定位 。 定 位 属性 是 CSS 属性 而 不 是 HTML 元 


素 属性 。 


(2) 可 以 通过 < div > 标签 将 页 面 分 成 儿 个 区 块 ,让 每 个 区 块 显示 不 同 内 容 , 或 把 儿 个 元 


素 封装 成 一 个 块 , 见 例子 2-3。 








< div id = "header"> 网 站 标题 栏 </div> 
<div id= "nav"> 导 航 栏 </div > 

<div id= "content"> 正 文 栏 </div> 
<div id= "footer"> 页 脚 栏 </div> 











例子 2-3: 
partl/ch2/css-div/div. html 


(3) < div > 和 < span > 作为 HTML 的 范围 标签 ,将 内 容 分 成 语义 性 的 块 ,div 块 之 间 有 


物理 换行 ,span 块 没 有 物理 换行 , 它 是 行内 (inline) 块 。 


(4) < div > 定位 的 CSS 属性 有 position ,float \z-index visibility。 


四 position 的 5 个 取 值 如 下 。 


。 static, 按 文本 流 顺序 定位 。left、top、right 及 bottom 属性 无 效 。 


relative, 相 对 于 它 在 文档 中 的 原始 位 置 定位 。 以 left、top、right 及 bottom 属性 的 相 


对 值 进行 定位 。 例 如 ,left:15px 表示 在 元 素 左边 添加 15 个 像素 ,也 就 是 向 右边 移 


动 15 个 像素 。 


absolute, 在 父 容器 内 ,以 像素 坐标 的 left、top、right 及 bottom 属性 进行 定位 。 
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。 fixed, 区 块 固定 在 浏览 器 的 某 一 位 置 ,不 随 页 面 移 动 。 以 left、top、right 及 bottom 
属性 进行 定位 。 

。 inherit ,继承 父 容器 position 的 属性 值 。 

@ float, 区 块 浮动 方向 值 top \right left\bottom。 

@ zindex, 层 的 顺序 , 值 越 大 层 越 靠 上 。 

@ visibility, 层 的 显示 , 值 为 visible 可 见 , 值 为 hidden 隐藏 。 

@ clear, 取 值 有 4 个 both ,leftright .none; 用 来 消除 float 属性 的 影响 ,恢复 区 块 文档 
流 的 特性 。 例 如 ,clear:both 表示 清除 前 面 区 块 左右 浮动 的 影响 ,相当 于 新 定义 的 区 块 会 另 
起 一 行 ,重新 按 文档 流 的 方式 排列 。 





2.7.4 <img > 图像 标签 


网 页 中 可 以 插入 多 媒体 文件 ,其 中 最 常用 的 多 媒体 文件 就 是 图 片 。 

(1) 通过 图 像 标签 在 页 面 引入 图 形 文件 。 

(2) 通过 < img > 标签 除了 显示 照片 之 外 ,还 可 以 让 表单 按钮 .超级 链接 由 平面 的 文字 效 
果 变 成 图 形 化 的 立体 效果 。 

(3) 基本 格式 < img src 二 "url"></img >, 其 中 ,src 为 图 片 的 位 置 ,可 以 是 相对 地 址 (本 
地 ) ,或 互联 网 上 的 一 个 图 像 URL 地 址 。 

(4) 以 下 为 某 图 像 的 属性 设置 。 





< img src = "mypic. gif" width = "30" height = "60" align = "left" /> 











2.7.5 <a> 超 级 链接 标签 

我 们 常常 看 到 网 页 会 带 下 画 线 的 标识 ,将 光标 移动 到 被 标识 的 内 容 上 ,鼠标 指针 会 变 成 
手 形 ,并 可 以 单 击 ,这 就 是 超级 链接 标签 。 

(1) 超级 链接 是 通过 鼠标 单 击 链接 对 象 (可 以 是 文字 或 图 片 ) , 跳 转 到 目标 页 面 。 

(2) 基本 格式 : < a href 二 "url" title 一 "显示 链接 说 明 "> 显示 链接 </a >。 

(3) 链接 分 类 ; 

OO 外 部 链接 : < a href 王 "http://www. qq. com"> 进 入 QQ 网 站 </a >。 

@ 内 部 链接 : < a href 王 "../index. html"> 返 回 主页 </a >。 

@ 下 载 链 接 : < a href 王 "doc/mydoc. doc"> 单 击 下 载 </a >。 

团 邮件 链接 : < a href 王 "mailto:hgzhouQ@msn. com"> 联 系 我 们 </a > 

@) 锚 链接 : < a name 二 "C2"> 第 二 章 </a ><a href 王 "#C2"> 参 见 第 二 章 </a>。 

(4) <a> 超 级 链接 标签 可 与 图 像 < img > 结合 。< a > 链接 是 以 字符 方式 显示 链接 ,加 入 
图 像 链 接 会 让 链接 的 外 观看 起 来 像 按 钮 , 见 例 子 2-4。 








人 = A 
站 http://www. qq. com">< img src = "qq. png"></img> 例子 2-4: 
a 








partl/ch2/a-img/a-img. html 
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<img > 图 像 的 链接 是 用 src 属性 ,而 <a > 的 链接 属性 是 href, 和 src 属性 值 类 似 ,href 的 
值 可 以 是 远程 的 页 面 链 接地 址 URL, 或 本 地 页 面 文 件 的 相对 地 址 。 


2.7.6 <ul> 和 < ol > 列表 标签 


列表 一 般 用 来 作 清 单 , 由 子 标签 <1i> 作 列表 清单 值 。 见 例子 2-5, 其 中 ,通过 ol-ul. html 
观察 ul 和 ol 标签 定义 的 区 别 ,通过 ol-ul-nav. html 看 到 在 列表 中 加 入 图 片 , 超 级 链接 做 成 
导航 栏 的 效果 。 

(1) <ul > unordered lists, 无 序列 表 。 例子 2-5; 

(2) <ol> ordered lists, 有 序列 表 , 在 列表 值 前 加 数字 或 ” Part1/ch2/ulol/ol-ul. html 
字母 编号 。 

(3) 列表 也 可 以 加 入 图 形 ,超级 链接 。 

(4) 作 侧 面 导 航 栏 ,< a > 链接 加 < ul >,< ol > 列表 可 作 导 航 栏 。 


























<div id= "nav"> <ol> 

<ol> <1i> 早 餐 </1i> 
<1i><a href ="#"> 早 餐 </a></1i> <1i> 午 餐 </1i> 
<1i><a href ="#"> 午 餐 </a></1i> <1i> 晚 餐 </1i> 
<1i><a href ="#"> 晚 餐 </a></1i> </ol> 

</ol> < 呀 > 早餐 

<ul> 早 餐 <1i> 和 牛奶 </1i> 
<1li><a href ="#" > 牛奶 </a></1i> <1i> 奶 茶 </1i> 
<1i><ahref ="#" > 奶茶 </a></1i> <1i> 咖 啡 </1i> 
<1i><a href ="#" > 咖啡 </a></1i> </ul> 

</ul> 

</nav> 

练习 


1. 通过 http:// 访 问 服务 器 端的 页 面 文件 和 直接 通过 浏览 器 打开 运行 一 个 本 地 
HTML 文件 ,来 认识 http:// 协 议和 file:// 的 区 别 。 

2. 编写 一 个 表单 ,分 别 用 method 的 get/post 提交 方法 ,查看 浏览 器 URL 地 址 的 变 
化 。 说 明 这 两 个 方法 的 区 别 。 

3. 作 一 个 登录 表单 ,再 作 一 个 action 的 跳 转 页 面 ,提示 “欢迎 登录 ”。 

4. 用 div 标签 把 表格 和 表单 分 成 两 个 块 , 定 位 到 页 面 的 不 同位 置 。 

















HTML+CSS 样 式 


3.1 CSS 样式 表 


CSS(Cascading Style Sheets, 层 一 样式 表 ) 是 从 HTML 分 离 出 来 的 技术 ,所 有 HTML 
标签 的 样式 都 集中 到 这 个 样式 表 定义 ,无须 再 在 标签 中 定义 属性 了 。 这 样 做 的 目的 是 对 网 
页 的 样式 维护 更 简单 ,因为 所 有 样式 外 观 的 定义 都 集中 在 一 个 样式 文件 里 面 ,文件 扩展 名 为 
“.css”。 只 要 修改 一 个 地 方 ,就 可 以 应 用 到 引用 这 个 样式 的 网 页 中 。 


3.2 CSS 的 语法 


CSS 是 一 个 独立 的 技术 , 它 有 自己 的 样式 属性 定义 和 语法 结构 ,虽然 有 些 属性 和 
HTML 的 属性 相似 。 所 以 ,这 里 的 CSS 属性 并 不 等 同 于 HTML 的 属性 ,例如 ,pfcolor: 
red} 并 不 可 以 换 成 < p color 二 "red">。 

(1) CSS 属性 用 值 对 表示 , 即 “ 属 性 : 值 ”, 用 冒号 “:”, 而 不 是 等 号 “二 ”来 给 属性 赋值 。 
用 “;” 结 束 一 个 属性 。 

(2) 样式 的 定义 要 加 大 括号 {}。 

(3) 一 个 样式 定义 可 以 同时 定义 多 个 属性 值 ,每 个 属性 值 用 “ ;分离 。 





p {color:red; background:yellow; } 





(4) 一 个 属性 可 以 设置 多 个 值 ,每 个 值 用 空格 分 开 。 





p {border: 2px solid #FF2211;} 
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(5) 具有 相同 样式 的 选择 器 用 逗号 分 隔 定义 。 








hil,p{font — family:arial, sans 一 serif} 











(6) CSS 属性 命名 是 不 区 分 大 小 写 的 ,但 是 惯例 是 使 用 小 写 ,属性 名 如 果 由 两 个 以 上 英 
文 单词 组 成 ,使 用 连 字符 ,例如 ,background-image 表示 背景 颜色 。 
(7) 注释 语法 : 





/* 注解 注释 内 容 * / 











(8) 在 一 条 CSS 规则 后 加 入 !important 这 个 关键 字 , 表 人 
示 这 条 CSS 规则 将 获 盖 已 定义 的 所 有 规则 。 并 防止 动态 修 。 例子 3-1: 
改 已 加 入 ! important 关键 字 的 规则 。 要 把 有 !important 的 。 part1/ch3/important/impor 
CSS 定义 在 < style > 标签 里 面 ,不 能 定义 在 标签 的 属性 里 面 ， “各 
见 例子 3-1 。 





p{color:red ! important;} 
p {color:blue;} 











3.3 ”CSS 样式 结构 

定义 CSS 有 三 种 方式 ,可 以 在 HTML 标签 里 定义 style 属性 ,或 者 将 CSS 定义 放 在 
< style > 标签 里 面 ,也 可 以 将 CSS 定义 放 在 外 置 文件 里 。 

3.3.1 内 联 样式 表 


内 联 样式 表 即 去 掉 标 签 元 素 里 面 的 有 关 样 式 属 性 ,将 样式 定义 直接 通过 style 属性 来 集 
中 定义 。 用 style 属性 方式 定义 样式 ,例子 如 下 : 








<p style = " color:red; background - color:yellow; "> 我 是 红色 字 黄 色 背 景 </p> 











3.3.2 内 部 样式 表 

在 每 一 个 标签 中 加 入 style 样式 是 一 个 很 烦琐 的 事情 ,也 不 便于 代码 维护 ,其 实 , 可 以 把 
内 部 样式 表 写 在 网 页 的 文件 头 < head > 里 面 , 所 有 的 样式 修改 都 在 文件 头 完成 。 用 < style > 
标签 在 < head > 标签 内 定义 CSS 样式 ,例子 如 下 : 





< head > 

< style type = "text/css"> 
</style> 

</head> 

















18 1 移动 Web 应 用 开发 教程 一 -HTML 5+JavaScript 框 架 全 栈 App 开 发 




















3.3.3 外 部 样式 表 


内 部 样式 表 解 决 了 单个 网 页 的 样式 定义 ,但 是 ,如 果 想 在 多 个 网 页 上 实施 同样 的 网 页 样 
式 就 只 有 重复 复制 CSS 代码 到 另 一 个 网 页 。 

所 以 ,为 了 让 多 个 网 页 可 以 使 用 统一 的 样式 定义 ,应 该 把 CSS 定义 作为 独立 文件 存放 ， 
文件 扩展 名 是 “. css”, 用 < link > 标签 在 < head > 内 声明 样式 文件 的 存放 路 径 和 文件 名 ,需要 
有 同样 风格 的 网 页 都 可 以 调用 这 个 样式 文件 。 

















<head> 

< link rel = "stylesheet" type = "text/css" href = "mystyle.css"> 

</head> 

前 面 两 种 方式 内 联 样式 表 和 内 部 样式 表 , 尽 量 不 要 使 用 ,除非 调试 代码 ,作为 临时 


写 的 CSS 样式 。 流 行 的 CSS 定义 采用 外 部 样式 ,这 也 是 为 了 CSS 代码 维护 方便 。 


3.4 ”CSS 选择 器 


我 们 可 以 通过 CSS 技术 改变 所 有 < p > 标签 的 颜色 ,但 是 如 何 让 其 中 某 一 个 < p > 标签 的 
颜色 不 一 样 呢 ? id 选择 器 就 派 上 用 场 了 。 对 其 中 一 个 < p > 标签 加 入 id 标识 ,在 样式 表 中 给 
这 个 id 定义 样式 ,这 样 ,这 个 < p > 标签 就 会 通过 加 入 id 标识 与 众 不 同 。 如 何 让 网 页 中 的 所 
有 < hl > 和 < p > 具有 统一 的 颜色 呢 ? 简单 的 方法 是 可 以 重复 定义 hl 和 p 来 获得 同一 种 颜 
色 ,class 选择 器 可 以 把 一 组 不 同 的 标签 归 类 ,所 以 叫 作 类 选择 器 ,再 给 这 个 类 定义 统一 样 
式 ,这 样 的 定义 更 简洁 、 清 晰 ,减少 重复 代码 。 

定义 CSS 样式 ,必须 指定 一 个 选择 器 才能 形成 一 个 完整 的 语法 结构 : 





选择 器 {属性 1: 值 ;属性 2: 值 …} 











CSS 选择 器 包括 HTML 的 标签 ,id 选择 器 、class 选择 器 、 伪 选择 器 .HTML 标签 属性 
选择 器 等 。 以 下 说 明 每 一 种 选择 器 的 使 用 方法 。 
(1) HTML 标签 选择 器 是 指 直 接 用 HTML 标签 作为 选择 器 名 称 。 例 如 : 





p {color:red;} 





(2) id 选择 器 是 在 HTML 标签 中 定义 id 属性 来 区 别 相同 的 标签 ,用 id 属性 值 前 面 加 
“#” 作 为 CSS 选择 器 。 例 子 如 下 : 





<p id= "first_line"> 我 是 第 一 行 </p> #first_line{color:red;} 
<p id= "second_line"> 我 是 第 二 行 </p> # second_line{ color:green; } 

















(3) class 选择 器 是 在 多 个 HTML 标签 中 定义 有 相同 值 的 class 属性 ,来 获得 同样 的 样 
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式 定义 ,用 class 属性 值 前 面 加 “. ”作为 class 选择 器 。 例 子 如 下 : 





< hl class = "clolor dark"> 我 是 标题 </p> .color dark { color:black;} 
<p class = "clolor dark"> 我 是 内 容 </p> 

















例子 3-2 中 ,在 mycss css 看 到 定义 class 和 id 的 区 别 。 





(4)“* "表示 所 有 HTML 标签 元 素 的 选择 器 。 2 
partl/ch3/class-id/class- 
# {font — family:arial, sans — serif} id. html 











3.5 选择 器 组 合 定义 


CSS 选择 器 可 以 用 多 种 方式 组 合 使 用 ,以 下 列 出 几 个 例子 。 
(1) 把 多 个 选择 器 作为 一 条 规则 定义 ,每 个 选择 器 用 “, ”分 隔 。 





hl, h2, h3{color:red;} 





(2) 父 与 子 选择 器 组 合 ,用 空格 分 隔 , 选 择 器 在 HTML 页 面 是 嵌 套 关系 ,可 以 从 上 一 级 
( 父 ) 选 择 器 查询 到 下 面 多 级 ( 子 ) 选 择 器 ,也 叫 后 代 选 择 器 。 





table th hil{color:red;} 





(3) 父 与 子 的 第 一 级 选择 器 。 用 “>” 表 示 第 一 级 子 选 择 器 。 例 如 ,以 下 例子 只 有 第 一 个 
<em > 标签 的 字 变 红 。 





<p> 这 是 < em > 红色 </em> 的 字 ， p> em {color:red;} 
这 是 < span >< em > 红色 </em> 的 字 吗 ?</span></p> 




















(4) 两 个 选择 器 处 于 同一 级 ,并 且 相 邻 , 叫 相 邻 兄弟 选择 【aa 
器 ,两 个 标签 选择 器 之 间 用 “十 "表示 。 以 下 代码 有 三 个 em 人 i 
标签 中 ,只 有 后 面 两 个 是 相 邻 兄弟 ,它们 共有 一 个 父 标签 oa 

span, 所 以 只 有 第 三 个 em 标签 变 红色 字 , 见 例子 3-3。 





<p> 这 是 < em > 红色 </em> 的 字 吗 ? 
< span> 
<em> 这 是 红色 </em> 
的 字 吗 ? 
<em> 这 个 也 是 红色 </em> 
的 字 吗 ? 
</span> 
</p> em+ em {color:red;} 
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3.6 ”CSS 颜色 .长度 和 字体 单位 


3.6.1 颜色 单位 


颜色 属性 在 CSS 定义 中 使 用 最 多 ,例如 ,文本 颜色 .网 页 背景 颜色 、 线 条 的 颜色 等 。 颜 
色 值 可 以 用 以 下 几 种 方式 表示 。 

(1) 纯 英文 表示 : 例如 {color:red)。 

(2) 用 三 原色 的 十 六 进 制 表示 : # RGB( 红 绿 蓝 )。# 号 代表 十 六 进 制 ,每 一 原色 由 两 
位 十 六 进 制 数组 成 。 例 如 , # FF0000 表示 红色 ,#00FF00 表示 绿色 ,#0000FF 表示 蓝 色 。 

(3) 用 十 进 制 表 示 : rgb(255,255,255)。 表 示 红 蓝 绿 的 取 值 范围 是 0 一 255, 所 以 ,共有 
256X256X256 王 16 万 种 颜色 组 合 。 





3.6.2 长 度 单 位 
长 度 属性 的 值 常常 用 屏幕 像素 px 表示 ,也 可 以 用 % 百 分 比 表 示 与 上 一 级 标签 (元 素 ) 
的 相对 值 ,例如 : 





#box{width:30 % ; height:200px;} 











3.6.3 字体 单位 


字体 尺寸 单位 可 以 是 px、pt、em 和 %,em 和 % 都 是 相对 值 。 它 们 的 意义 如 下 。 

(1) px 是 以 屏幕 像素 为 单位 的 字体 单位 。 

(2) pt(point) 等 于 出 版 印刷 的 1/72 英寸 物理 单位 作为 字体 单位 ,所 以 跟 DPI 有 关系 。 
在 网 页 设计 中 ,这 个 DPI 与 物理 设备 的 DPI 无 关 , 跟 浏览 器 的 默认 DPI 有 关 。 例 如 ,Firefox 
浏览 器 默认 的 DPI 都 是 96pxyVinch ,那么 实际 上 9pt 二 9X1/72X96 二 12px。 

(3) em 字体 单位 是 相对 值 ,相对 于 上 一 级 字体 单位 的 值 ,而 px 和 pt 都 是 绝对 值 。 例 
如 ,HTML 文档 默认 字体 大 小 为 16px,lem 相当 于 16px 大 小 的 字体 ,所 以 ,12px 二 12/16 二 
0.75em,10px 一 10/16 一 0.625em。 

(4) 用 % 为 字体 单位 ,如 果 font-size 二 62. 5%, 意 味 着 字体 定义 是 以 上 一 级 的 字体 的 百 
分 比 放 大 或 缩小 。 如 果 上 一 级 的 默认 字体 是 16px, 那 么 ,相当 于 lem 二 16pxX 62.5% 二 
10px,12px 一 1. 2em。 


3.6.4 CSS 字体 定义 


字体 的 属性 很 多 ,基本 的 属性 有 以 下 几 个 。 
(1) font-size/line-weight( 尺 寸 / 行 间距 )。 
(2) font-weight( 粗 细 )。 

(3) font-style( 风 格 ,斜体 .下 画 线 ) 。 


(4) font-variant( 小 写 ) 。 


(5) font-family( 字 体 族 ) 。 
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字体 属性 可 以 单独 定义 ,也 可 以 通过 font 属性 一 次 赋值 。font-family 可 以 一 次 定义 多 


个 候选 字体 ,用 “, ”分隔 。 例 如 : 








p{font:font - style font ~ variant font - weight font - size/line — height font ~ family;} 











p{ font:italic bold 12px/20px arial, sans — serif; } 








3.7 CSS 盒子 模型 


HTML 所 有 标签 元 素 都 有 盒子 的 特性 ,例如 ,高 宽 、 边 框 等 。 图 3-1 中 ,盒子 模型 的 属 
性 适用 于 所 有 标签 元 素 。 两 个 标签 元 素 的 内 容 可 以 通过 这 些 盒子 的 属性 调节 距离 感 。 





border( 边 框 ) 





margin( 外 边 距 ) 





height|! 
高 度 外 





padding( 内 边 距 ) 


element 


(元 素 ) 








图 3-1 盒子 模型 


(图 片 来 源 :http://www. w3school. com. cn/css/css_boxmodel. asp) 


在 例子 3-4 如 下 代码 中 ,有 两 个 < p > 标签 ,通过 盒子 模型 ,给 第 一 个 <p > 设置 了 盒子 属 


性 ,可 以 看 到 盒子 的 效果 。 





<p id = box> 你 好 !HTML5 </p> 
<Pp> 你 好 !CSS </p> 





Ss 
例子 3-4: 

partl/ch2/css-box/ 

cssbox. html 





width:100px; margin: 10px; 





# box {background: black; color:white; height: 90px; 


padding: 


Spx;border — style: solid; border — color:red;} 
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3.8 网 页 设计 的 忠告 


HTML 十 CSS 就 可 以 制作 一 个 静态 网 页 ,也 是 网 站 开发 的 基础 ,网 页 设计 时 应 尽量 遵 
守 以 下 原则 。 

(1) 网 页 设计 中 ,尽量 用 CSS 来 改变 样式 ,不 要 用 标签 的 属性 来 改变 样式 。 

(2) 尽量 用 外 部 样式 文件 来 定义 样式 。 

(3) 尽量 用 CSS 选择 器 ; id、class 来 标识 标签 的 样式 。 

(4) 使 用 DIV 十 CSS 的 网 页 布局 ,避免 用 表格 布局 。 

(5) 保持 良好 的 代码 写作 风格 ,使 用 Tab 键 来 体现 标签 的 舱 套 关系 。 

(6) 要 在 meta 标签 中 定义 字符 集 , 例 如 : charset=utf-8, 及 在 HTML 标签 中 定义 语言 
属性 ,例如 : lang 一 "zh"。 

(7) 使 用 meta 标签 来 描述 网 页 的 关键 字 ,内 容 概要 ,让 搜索 引擎 理解 你 的 网 页 。 


练习 


1. 用 DIV 十 CSS 完成 一 个 网 页 布局 ,要 求 有 标题 栏 在 页 面 顶部 ,导航 栏 在 页 面 左 边 ,内 
容 栏 在 中 间 ,页 脚 栏 在 页 面 底部 。 

2. 通过 编写 代码 ,了解 <body text 二 "red">,<p color 一 "red">、< font color 二 "red"> 的 
区 别 。 

3. 定义 CSS 有 三 种 方式 : 标签 里 的 style 属性 ,< head > 里 面 的 < style > 标签 和 CSS 外 
置 文件 。 编 写 代 码 ,对 < p > 的 颜色 进行 设置 ,了 解 这 三 种 方式 的 区 别 。 

4. 编写 代码 ,让 table 的 边界 颜色 为 红色 。 

5. 网 页 里 面 有 三 个 <p > 标签 ,用 class 和 id 选择 器 ,给 第 一 个 < p > 标签 加 红色 (red) ,第 
二 个 < p > 标签 加 绿色 (green) ,第 一 行 和 第 三 行 < p > 标签 加 边框 。 
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HTML+CSS+JavaScript 


4.1 JavaScript 语言 


为 了 让 网 页 有 更 多 的 交互 性 ,早期 著名 的 浏览 器 开发 商 Netscape( 景 网 公司 ) 在 1995 年 
发 行 的 Netscape Navigator 2.0 浏览 器 中 ,加 入 了 一 个 称 之 为 LiveScript 的 脚本 语言 。 当 时 
Sun 公司 也 刚刚 创建 一 个 新 的 Java 语言 ,而 Java 语言 的 发 明 跟 互 联网 没有 太 多 关系 ,但 是 ， 
由 于 Java 当时 太 时 比 , Netscape 公司 便 将 LiveScript 改名 成 JavaScript。 虽 然 ,JavaScript 
与 Java 语言 相差 甚 远 ,更 像 是 C 语言 的 计算 机 编程 语言 ,但 是 , 它 是 运行 在 浏览 器 里 面 的 解 
释 型 语言 ,而 不 是 像 C 语言 那样 的 编译 型 语言 。 

1997 年 ,JavaScript 1. 1 的 标准 化 ECMAScript 草案 提交 给 欧洲 计算 机 制造 商 协会 
(ECMA) ,随后 ,国际 标准 化 组 织 及 国际 电工 委员 会 (ISOVIEC) 也 认可 了 ECMAScript 作为 
标准 (ISO/IEC-16262) 。 目 前 ,所 有 浏览 器 都 支持 JavaScript 语言 。 


4.2 JavaScript 的 基本 语法 


像 其 他 计算 机 高 级 语言 一 样 ,JavaScript 的 语法 规则 如 下 。 

(1) JavaScript 语言 是 区 分 大 小 写 的 ,语句 之 间 用 “; ”分隔 。 

(2) JavaScript 的 内 置 变量 、 丽 数 命名 采用 驼峰 命名 方法 , 即 如 果 是 由 两 个 以 上 英文 组 
成 的 名 字 ,第 二 个 以 后 的 单词 首 字母 大 写 ,例如 ,getElementById() 。 

(3) 变量 须 先 定义 ,才能 使 用 。 

(4) 变量 可 以 不 声明 类 型 ,通过 赋值 才 转 换 相 应 类 型 。 

(5) 变量 类 型 有 : 布尔 (boolean) 数字 (Cnumber) .字符 串 (Cstring)、 数 组 (array) .时间 
(date) .对象 (object) 、 函 数 (function) 正则 表达 式 (regExp) 。 

(6) 基本 变量 用 var 定义 ,布尔 ,数字 字符 串 是 基本 变量 。 

(7) JavaScript 是 面向 对 象 编程 的 语言 ,但 是 它 没有 类 (class) 的 定义 ,是 基于 原型 
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(prototype) 的 ,函数 定义 就 相当 于 一 个 类 定义 。 

(8) JavaScript 表面 看 上 去 是 函数 驱动 型 语言 ,但 是 , 它 其 实 是 基于 对 象 的 语言 ,所 有 的 
系统 属性 、 函 数 都 是 封装 在 对 象 里 面 。 有 些 系统 (内 置 ) 函数 ,例如 isNaN() 可 以 直接 调用 ， 
是 因为 它 可 以 忽略 封装 它 的 对 象 Global。 再 如 alert() 函数 也 是 忽略 window 对 象 ,而 直接 
调用 。 用 户 自 定义 函数 其 实 也 是 一 个 对 象 。 其 实 ,JavaScript 已 经 过 渡 到 完全 的 面向 对 象 
语言 , 它 已 经 不 像 C 语 言 那样 有 独立 的 函数 。JavaScript 的 一 切 函 数 都 是 一 个 对 象 下 的 方 
法 ,只 不 过 是 在 调用 一 些 系 统 函数 的 时 候 , 把 对 象 名 省 略 了 。 

(9) JavaScript 可 以 声明 匿名 函数 , 即 没 有 函数 名 。 因 为 没有 函数 名 ,所 以 这 个 函数 是 
不 可 被 调用 的 。 可 以 作为 赋值 ,或 直接 执行 。 例 如 : var f==function () { document. write 
0O;}。 

(10) JavaScript 注释 和 其 他 计算 机 语言 一 样 ,// 表 示 单 行 注释 ,/ ** /表示 多 行 注释 。 


4.3 ”JavaScript 的 结构 


JavaScript 语句 是 写 在 < script > 标签 里 面 , 需 用 type 属 忆 
性 说 明 脚本 的 MIME 类 型 ,如 果 不 写 type 类 型 说 明 , 默 认 是 。 例子 41: 
JavaScript 文件 类 型 。 放 在 < body > 标签 内 的 脚本 会 在 网 页 Part1/eh4/is/js1. html 
打开 的 时 候 马 上 执行 。 例 子 4-1 是 将 JavaScript 代码 写 在 
<body > 标签 中 。 





<body> 
< script type = "text/javascript"> document. write(" 你 好 ! javaScript");</script> 
</body> 











但 是 ,如 果 脚 本 不 想 马上 被 执行 ,而 是 在 某 种 事件 发 生 的 时 候 执行 ,在 < body > 标签 下 
写 的 代码 就 不 适用 了 。 还 有 ,如 果 脚 本 在 一 个 页 面 中 被 多 次 重复 执行 ,这 些 重 复 代 码 写 在 
< body > 标签 中 会 让 执行 效率 降低 。 所 以 ,JavaScript 语句 也 
可 以 先 在 < head > 内 写 好 ,一 般 是 定义 好 函数 ,再 在 < body > 例子 4-2: 
标签 内 直接 调用 ,如 例子 4-2(partl/ch4/js/js2. html 和 partl/ Partl/ch4/is/is2. html 
ch4/js/js3, htmD 是 事件 处 理 调用 函数 方法 。 下 面 的 代码 可 以 ?eh44/js3. hm 
通过 onload 网 页 加 载 事 件 ,调用 message 函数 对 象 ,或 右边 
代码 直接 调用 message() 函 数 。 














<head> 
< script type = "text/javascript"> 
function message() 

{ document. write(" 你 好 !JavaScript");} Sbody> 
</script> < script> 
</head> message(); 
<body onload = "message"> </script > 
<body> <body> 
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但 是 ,如 果 脚本 需要 被 多 个 页 面 调用 ,但 其 他 页 面 是 不 能 访问 写 在 某 一 页 面 的 脚本 的 。 
因此 ,为 了 解决 这 个 问题 ,JavaScript 语句 也 可 以 先 写 在 外 部 
文件 里 ,扩展 名 为 “.js”, 在 网 页 < head > 内 ,通过 < script > 标 
签 的 src 属性 引用 外 部 文件 脚本 。 注 意 , 写 在 外 部 的 脚本 文 ”介子 43: 

件 不 再 需要 写 < script > 标签 。 下 面 是 例子 4-3 的 代码 ,左边 下 人 人 ae 
代码 是 外 部 JavaScript 文件 ,文件 名 是 ext. js 右边 代码 是 网 
页 加 载 ext. js 文件 。 














window. onload = message; <head> 
function message( ) < script src = "/js/ext. js"> 
{ document. write(" 你 好 !JavaScript");} </script > 
</head> 














4.4 JavaScript 函数 详解 


函数 是 一 种 特殊 对 象 ,相当 于 用 户 自 定义 的 对 象 。JavaScript 语法 非常 灵活 ,虽然 说 是 
一 个 面向 对 象 的 语言 , 却 很 少 看 到 对 象 的 出 现 ,甚至 很 多 地 方 忽略 了 对 象 ,我 们 更 多 的 是 看 
到 独立 的 函数 。 而 函数 具有 两 面 性 ,一 是 本 身 它 就 是 对 象 ,其 二 它 就 像 C 语言 的 函数 。 作 
为 对 象 , 函 数 名 就 不 要 加 括号 ,例如 ,var addl 王 add; 传 递 的 是 对 象 ,可 以 用 新 对 象 完成 加 法 
var sum 一 addl(1,2); 如 果 加 括号 ,等 式 传递 的 是 函数 执行 后 的 返回 值 。 

(1) 函数 声明 。 

OO 直接 声明 函数 对 象 mm。 





var mm = function () {document. write(" 你 好 , 函数 !");} 





@ 声明 函数 体 。 








function mm() {document. write(" 你 好 , 函数 !1");} 








(2) 函数 的 调用 与 赋值 。 
| 直接 执行 函数 。 





mm(); 











@ 函数 对 象 赋值 ,直接 使 用 函数 名 ,没有 圆 括号 ,赋值 给 事件 对 象 , 当 事 件 发 生 时 ,执行 
函数 。 如 下 代码 中 ,第 二 行 代码 中 的 hello 变量 就 是 函数 对 象 , 执 行 hello() 和 执行 mm() 的 
结果 是 一 样 的 。 





window. onload = mm; 
var hello= mm; 
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@ 函数 体 赋值 ,函数 名 带 圆 括号 ,这 种 赋值 是 先 调用 函数 ,再 把 函数 返回 值 赋值 。 





var m= mm(); 





(3) 函数 带 参数 及 返回 值 。 





function add(x, y) { return x + y;} 
var sum = add(1,2); 











(4) 用 Function 构造 函数 创建 函数 对 象 。Function 参 
数 必须 是 字符 串 , 最 后 一 个 参数 是 函数 体 。 注意 : Function 例子 4-4: 
构造 函数 第 一 个 字符 是 大 写 , 与 普通 函数 定义 关键 字 Partl/eh4/func/funcl. html 
unction 有 区 别 , 见 完整 例子 4-4。 








var addxy = new Function ("x","y"," return x + y;"); 
var sum = addxy(1,2); 











4.5 JavaScript 的 DOM 技术 


DOM(Document Object Model) 就 是 文档 对 象 模型 ,在 DOM 技术 里 面 ,HTML 标签 称 
为 元 素 或 节点 ,JavScript 把 HTML 的 所 有 标签 元 素 看 成 对 象 。 所 有 的 HTML 标签 元 素 都 
是 通过 document 对 象 的 属性 方法 来 添加 、 删 除 和 操作 HTML 的 节点 标签 。 

W3C 组 织 于 2000 年 11 月 发 布 DOM-2 规范 ,2004 年 4 月 发 布 DOM-3 规范 。DOM 独 
立 于 平台 和 编程 语言 , 它 可 被 任何 编程 语言 诸如 Java、JavaScript 和 VBScript 使 用 。 

JavaScript 的 DOM 技术 将 HTML 页 面 看 作 树 结构 , 树 结构 就 有 节点 ,节点 为 标签 的 称 
为 元 素 节 点 ,否则 称 为 文本 节点 (标签 里 的 文本 )。 元 素 节 点 可 以 包含 其 他 元 素 节点 和 文本 
节点 ,如 图 4-1 所 示 。 

<html> 


<head> 
<title> 


html 


My page 
</title> 
</head> 
<body> 
<p> 





This is my page. 


</p> 
</body> 
</html> 








4-1 DOM 把 HTML 文档 看 成 树 结构 


JavaScript 通过 DOM 的 父 对 象 document 来 访问 HTML 页 面 的 标签 元 素 或 文本 元 
素 , 并 可 以 添加 、 修 改 , 删 除 HTML 标签 及 其 属性 。 例 如 ,访问 一 个 HTML 标签 对 象 ,动态 
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修改 它 的 字体 属性 。 下 面 是 一 些 常用 的 DOM API 例子 。 
(1) 通过 id 选择 器 访问 HTML 标签 ,返回 一 个 标签 对 象 。 





var id = document. getElementBYId(" id" ) ; 








(2) 通过 标签 名 访问 HTML 标签 ,返回 一 个 标签 数组 对 象 。 例 子 4-5 通过 DOM 技术 
来 控制 HTML 页 面 标签 的 属性 。 








例子 4-5: 


var tag = document. getElementsByTagName("p"); partl/ch4/dom/dom!1. html 


tag[0]. style. color = "red";// 给 第 一 个 p 标 签 文本 设置 红色 











(3) DOM 技术 创建 HTML 标签 ,例子 4-6 是 通过 DOM 技术 来 创建 一 个 <p > 标签 元 
素 ,在 div 标签 下 插入 “段落 3”。 





mm 
<div id= "dl"> 


例子 4-6: 
< 了 志 = "p1 "> 股 落 1</p> partl/ch4d/dom/dom2. html 
<p id= "p2"> 段 落 2</p> 
</div> 
< Script> 


var para = document. createElement("p"); 
var node = document. createTextNode(" 段 落 3"); 
para. appendChild(node) 
var ele = document. getElementById("d1"); 
ele. appendChild(para); 
</script> 











(4) 通过 DOM 技术 直接 访问 节点 标签 元 素 对 象 。 下 面 的 例子 4-7 是 访问 第 一 个 表单 
对 象 forms[0] 下 面 的 第 一 个 标签 元 素 elements[0], 也 就 是 第 一 个 < input > 标签 ,并 显示 它 
的 type 值 和 输入 的 值 。 








人 例子 4-7: 
function tt() {var tt = document. forms[0].elements[0]; | 
var type = tt. type; value = tt. value;alert("type is: "+ 
type + "value is: "+ value);} 
</script> 
<form> 
< input type = "text" onblur = "tt()"></input > 
</form> 











4.6 JavaScript 的 面向 对 象 编程 


JavaScript 语言 是 面向 对 象 编程 语言 .在 JavaScript 世界 里 ,一 切 事物 皆 对 象 。 因 为 
JavaScript 的 运行 与 浏览 器 环境 有 关 ,我 们 把 JavaScript 运行 的 环境 叫 作 宿主 环境 ,由 这 个 
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环境 提供 JS 引擎 来 执行 解析 JavaScript 代码 。JavaScript 的 对 象 类 型 较为 复杂 ,基本 可 以 
分 成 三 种 : 内 置 对 象 、 原 生 ( 本 地 ) 对 象 和 宿主 对 象 。 


4.6.1 内 置 对 象 


内 置 对 象 是 由 ECMAScript 标准 实现 提供 的 、 独 立 于 宿主 环境 的 所 有 对 象 ,这 些 对 象 已 
被 实例 化 ,可 以 直接 调用 。 这 里 只 有 两 个 内 置 对 象 : Global 和 Math。 

Global 对 象 其 实 并 不 被 实际 引用 ,Global 对 象 包含 的 函数 isNaN() ,用 来 检查 一 个 变 
量 是 不 是 非 数 字 ,可 以 直接 调用 ,而 不 要 写成 Global. isNaN() 。 

Math 对 象 常常 用 来 处 理 数 学 运算 ,例如 ,Math. ceil() 数 上 舍 入 ,Math. round() 四 售 
五 人 。 


4.6.2 原生 对 象 


原生 (本 地 ) 对 象 在 ECMA-262 标准 中 也 是 指 “ 独 立 于 宿主 环境 的 ECMAScript 实现 提 
供 的 对 象 "。 原 生 对 象 和 内 置 对 象 的 唯一 区 别 是 ,可 以 使 用 new 来 创建 实例 化 ,或 者 直接 可 
以 调用 对 象 的 静态 方法 。 

已 经 定义 好 的 常用 原生 对 象 有 以 下 几 种 。 

(1) Object: 一 个 抽象 的 对 象 原型 ,Object 对 象 中 的 所 有 属性 和 方法 都 会 出 现在 其 他 对 
象 中 ,所 以 它 是 原生 对 象 的 顶级 父 对 象 。 

(2) Function: 函数 的 引用 类 型 (类 )。 

(3) Array: 数组 引用 类 型 (类 ) 。 

(4) String: String 原始 类 型 的 引用 类 型 (类 ) 。 

(5) Boolean: Boolean 原始 类 型 的 引用 类 型 (类 ) 。 

(6) Number: Number 原始 类 型 的 引用 类 型 (类 ) 。 

(7) Date: 日 期 对 象 引 用 类 型 (类 ) 。 

(8) RegExp: 正则 表达 式 引 用 类 型 (类 ) 。 

(9) Error: 错误 处 理 对 象 引 用 类 型 。 

以 下 代码 是 通过 Array() 构 造 函 数 创建 一 个 数组 对 象 。 





var car = new Array(); 











4.6.3 宿主 对 象 


宿主 对 象 是 由 ECMAScript 实现 的 宿主 环境 提供 的 对 象 。 

所 有 BOM(Browser Objective Model) 和 DOM(Document Objective Model) 对 象 都 是 
宿主 对 象 。 BOM 对 象 是 处 理 、 访 问 、 控 制 浏览 器 窗口 的 API, DOM 是 W3C 制定 的 标准 ， 
DOM 对 象 是 用 来 处 理 HTML 标签 元 素 的 API。 

这 两 个 宿主 对 象 的 顶级 对 象 是 window, window 对 象 包含 对 象 属性 和 方法 ,及 其 他 
BOM 和 DOM 的 子 对 象 , 见 图 4-2。 
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submit() 





图 4-2 BOM 和 DOM 的 对 象 ,属性 ,方法 


其 中 ,BOM 对 象 有 以 下 几 个 。 

(1) history: 与 浏览 器 的 浏览 历史 有 关 。 

(2) navigator: 与 客户 浏览 器 有 关 。 

(3) screen: 与 客户 端 显示 屏 有 关 。 

(4) location: 与 域名 、URL 地 址 有 关 。 

DOM 对 象 的 父 对 象 是 document,document 对 象 包含 HTML 的 元 素 对 象 及 其 属性 方 
法 ,这 些 对 象 已 经 实例 化 ,可 以 直接 引用 。 以 下 是 部 分 DOM 对 象 。 

(1) forms: 表单 对 象 数组 。 

(2) anchors: 链接 对 象 数组 。 

(3) images: 图 像 对 象 数组 。 

(4) links: links 标签 对 象 数组 。 

window 对 象 作为 顶级 的 父 对 象 ,往往 在 调用 它 的 函数 时 可 以 忽略 不 写 对 象 名 。 例 如 ， 
可 以 写成 window. alert() ,或 直接 写 alert() 都 是 对 的 。 


4.6.4 创建 对 象 和 访问 对 象 属性 方法 


其 实 ,JavaScript 提供 的 对 象 已 经 足以 完成 基本 编程 任务 ,而 用 户 创建 最 多 的 是 函数 ， 
这 是 一 个 特殊 的 对 象 ,创建 函数 时 给 人 的 感觉 是 在 做 C 语言 编程 。 

我 们 多 数 情 况 下 是 通过 原生 对 象 的 构造 函数 创建 一 个 对 象 实例 ,注意 ,所 有 的 构造 函数 
命名 都 是 第 一 个 字母 大 写 。 例 子 4-8 的 代码 是 通过 构造 函数 创建 一 个 字符 串 对 象 ( 也 可 以 
声明 一 个 字符 串 变量 ) ,访问 对 象 的 属性 length 获得 字符 串 的 长 度 ,再 调用 这 个 对 象 的 方法 
将 字符 串 转 成 大 写 。 
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ss= ee Selont ea x 例子 #48: 
var ss = "你 好 ! JavaScript!"; part1/ch4/o00/001. html 
var 11 = ss. length; 
ss = ss. toUpperCase( ); 











4.7 JavaScript 事件 驱动 


JavaScript 是 事件 驱动 语言 ,键盘 ,鼠标 ,浏览 器 窗口 的 打开 、 关 闭 、 移 动 ,窗口 的 大 小 变 
化 ,表单 输入 栏 的 数据 变化 都 可 以 产生 事件 。 

(1) 所 有 事件 控制 器 (事件 处 理 程 序 对 象 ,事件 监听 器 ) 命 名 都 以 on 开头 ,一 律 小 写 。 
例如 ,onload 表示 页 面 加 载 事 件 ,onmouseover 表示 光标 移入 到 元 素 上 触发 。 

(2) 事件 触发 后 ,直接 调用 函数 对 象 。 下 面 两 种 事件 调用 函数 的 代码 是 有 区 别 的 ,第 一 
种 写法 是 正确 的 ,直接 将 函数 对 象 赋值 给 onload 事件 处 理 程序 对 象 ,再 由 事件 处 理 对 象 在 
事件 发 生 时 执行 函数 体 。 右 边 代 码 也 可 以 执行 ,但 是 结果 不 一 样 , 先 执行 函数 体 ,再 把 函数 
的 返回 值 作 为 对 象 赋值 给 事件 处 理 对 象 。 





window. onload = mm; window. onload = mm( ) ; 

















(3) JavaScript 的 事件 处 理 程序 可 以 作为 HTML 标签 里 的 一 个 事件 属性 。 例 子 4-9 是 
通过 onclick 的 单 击 事件 属性 来 调用 函数 showPic() ,打开 图 片 。 注 意 ,在 HTML 标签 里 的 
事件 属性 赋值 的 是 函数 体 ,而 不 是 函数 对 象 。 








<head> 
<script> 
function showPic() {window. open( "mypic. jpg", "newwin");} 

</script> 

<head> 

<body> 

<a href = "并 " onclick= "showPic()"> 查 看 图 片 </a> 
</body> 


例子 4-9: 
partl/ch4d/event/evt1. html 





(4) 例子 4-10 是 通过 DOM 技术 给 第 一 个 <p > 标签 设置 单 击 事件 。 








<head> 
< Script> 
document. getElementsByTagName ("p" ) [0]. onclick = showPic; 
function showPic() {window. open("mypic. jpg", "newwin");} 
</script> 
<head> 
<body><p> 单 击 查看 图 片 </p> 
<p> 单 击 没 反 应 </p> 
</body> 


例子 和 10: 
partl/ch4d/event/evt2. html 
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(5) 可 以 通过 DOM 改变 CSS 样式 ,例如 ,例子 4-11 是 通过 一 个 按钮 的 单 击 事件 来 改 
变 id=dl 的 < hl > 标签 颜色 。 








<hl id= "dl"> DOM 改变 CSS 样式 </hl > 

< button type= "button" 

onclick = "document. getElementById( 'dl1'). style. color = 'red'"> 单 
击 将 文字 变 成 红色 </button> 


甸子 4 11: 
partl/ch4d/event/evt3. html 











4.8 JavaScript 的 AJAX 异步 通信 技术 


AJAX 即 Asynchronous JavaScript and XML( 异 步 的 JavaScript 和 XML) , 它 不 是 新 的 
编程 语言 ,而 是 一 种 使 用 现 有 技术 的 新 方法 和 思想 。AJAX 是 与 服务 器 交换 数据 并 实时 更 
新 部 分 网 页 的 技术 ,而 不 用 重新 加 载 整 个 页 面 。AJAX 的 目的 是 提高 网 页 的 响应 性 ,改善 基 
于 Web 应 用 程序 的 界面 效果 。 

2005 年 ,Google 通过 Google Suggest 使 AJAX 变 得 流行 起 来 。Google Suggest 使 用 
AJAX 产生 一 种 动态 性 的 搜索 关键 词 建议 , 当 用 户 在 谷歌 的 搜索 框 中 输入 关键 字 时 ， 
JavaScript 会 把 这 些 正在 输入 的 字符 发 送 到 服务 器 端 ,然后 服务 器 会 不 断 地 返回 和 修正 一 
个 搜索 建议 的 关键 词 列表 。Google 地 图 也 是 AJAX 技术 的 受益 者 ,我 们 知道 地 图 的 数据 量 
很 大 ,但 是 ,通过 AJAX 技术 ,用 户 打 开 一 个 地 图 ,可 以 看 到 页 面 是 局 部 不 断 地 显示 出 来 ,而 
不 是 等 待 一 张 地 图 加 载 完 再 打开 ,使 用 户 的 体验 得 到 了 改善 。 

AJAX 技术 是 通过 内 置 的 XMLHttpRequest 构造 函数 ,创建 一 个 HTTP 通信 对 象 实 
例 ,向 服务 器 发 送 HTTP 的 request( 请 求 ) ,接收 服务 器 传送 的 任何 格式 的 数据 文件 ,常用 
的 Web 文件 是 XML 格式 或 文本 格式 。 例 子 4-12 是 通过 
AJAX 技术 将 一 个 文本 文件 textl. txt 从 服务 器 端 传递 到 客 。 例子 4-12: 
户 端 。 注 意 ,演示 这 个 例子 要 在 Web 服务 器 下 运行 ,通过 浏 Partl/eh4/ajaxaiax html 
览 器 访问 查看 结果 。 

AJAX 编程 方法 有 以 下 几 步 又 。 

(1) 创建 HTTP 通信 对 象 实例 xmlhttp。 








var xmlhttp = new XMLHttpRequest(); 





(2) 用 get 或 post 方法 提交 一 个 HTTP 请 求 包 ,send() 向 服务 器 发 出 request 请 求 包 。 





xmlhttp. open( "GET", "testl1. txt", true); 
xmlhttp. send(); 





(3) 通信 事件 监听 ,一 旦 发 生 通信 变化 ,异步 检测 通信 状态 。 





xmlhttp. onreadystatechange = function () {…} 
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(4) 通信 状态 属性 readyState 有 5 个 值 : 0 一 通信 没有 初始 化 ,1 一 通信 在 加 载 数 据 ,2 一 
通信 数据 加 载 完成 ,3 一 可 以 访问 xmlhttp 对 象 ,4 一 xmlhttp 通信 完成 。 服 务 器 返回 状态 属 
性 status 就 是 HTTP 的 状态 码 : 200 一 ok ,404 一 找 不 到 文件 ,500 一 页 面 出 错 。 





if (xmlhttp. readyState == 4 && xmlhttp. status == 200) 











(5) xmlhttp. responseXML: 服务 器 返回 的 XML 数据 包 。 
(6) xmlhttp. responseText: 服务 器 返回 的 文本 包 。 


4.9 JSON: JavaScript 对 象 表示 法 


JSON(JavaScript Object Notation) 是 一 种 轻 量 级 的 数据 交换 格式 ,虽然 JSON 使 用 
JavaScript 语法 来 描述 数据 对 象 ,但 是 JSON 是 独立 于 语言 和 平台 的 数据 格式 ,构建 的 
JSON 解析 器 和 JSON 库 可 以 支持 许多 不 同 的 编程 语言 。 

JSON 可 以 是 一 个 独立 的 文本 ,在 网 络 中 传输 ,一 个 简单 的 String、Number、Boolean 值 
对 或 数组 ,甚至 一 个 复杂 的 Object 对 象 ,例如 ,JavaScript 的 函数 。 


4.9.1 JSON 的 特性 


类 似 于 XML 格式 ,JSON 具有 以 下 特点 。 

(1) JSON 是 基于 纯 文本 的 数据 格式 。 

(2) JSON 具有 “自我 描述 性 ”( 键 值 对 )。 

(3) JSON 具有 层级 典 套 结构 (JSON 格式 再 嵌 套 JSON 格式 )。 
(4) JSON 是 JavaScript 的 一 个 对 象 , 可 通过 JavaScript 进行 解析 。 
(5) JSON 数据 可 以 像 XML 一 样 通过 使 用 AJAX 进行 传输 。 


4.9.2 JSON 的 语法 


通过 JSON 可 以 声明 对 象 和 数组 ,JSON 语法 规则 如 下 。 
(1) 声明 对 象 使 用 “{…}”, 插 号 里 面 存 放 的 是 数据 值 对 。 以 下 是 声明 一 个 student 
对 象 。 








var student = {}; 








(2) 数据 值 对 表示 法 是 由 名 称 (变量 名 ,必须 加 双 引 号 ) 十 “: ”十 值 组 成 ,多 个 值 对 用 “,” 
分 隔 。 





var student = {"name":"Joe", "age":20 }; 











(3) JSON 值 可 以 是 : 
@ 数字 (整数 或 浮 点 数 )。 
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@ 字符 串 ( 在 双 引 号 中 )。 

@ 逻辑 值 (true 或 false) 。 

图 数组 (在 方 括号 中 ) 。 

@ 对 象 (在 花 括 号 中 ) 。 

© null。 

(4) JSON 使 用 “[…]” 声 明 数 组 ,括号 里 面 是 数组 的 值 , 数 组 元 素 可 以 是 任意 的 数据 类 
型 ,可 以 嵌 套 JSON 的 对 象 。 





Var students = [ 

{ "name":"Joe" ，"age" :19 }, 
{ "name":"Mark" , "age":21 }, 
{ "name":"Mary" , "age": 18 } 
J; 











(5) 对 象 可 以 封装 属性 和 方法 ,在 JSON 中 加 入 JE 
JavaScript 函数 对 象 来 访问 JSON 的 属性 。 例 4-13 定义 了 一 。 例子 4-13: 
个 allstudent 的 JSON 格式 的 JS 对 象 ,包含 student 属性 和 Part/ch4/json/json1. html 
一 个 隐 数 对 象 showStudent。 





var allstudent ={ 

students : [{ "name":"Joe" , "age":19 },{ "name":"Mark" , "age":21 },], 

showStudent: function (i) {alert(" 第 一 个 学 生 名 字 : " + allsdudent. student[i]. name + "年 龄 : "+ 
allstudent[i].age);} } 











(6) 通过 JavaScript 的 eval() 函 数 将 服务 器 传送 的 JSON 文件 转换 成 JavaScript 对 象 。 


4. 10 ”JavaScript 的 jQuery 框架 


jQuery 是 JavaScript 流行 的 开发 框架 ,是 一 个 用 JavaScript 编写 的 函数 库 , 通 过 CSS 选 
择 器 ,加 强 Web 界面 外 观 和 交互 效果 , 它 强 调 write less, do more。 它 的 框架 改变 了 
JavaScript 的 编码 风格 ,通过 DOM 和 CSS 选择 器 操作 页 面 。jQuery 的 语法 设计 使 得 许多 
操作 变 得 简单 ,如 操作 文档 对 象 (document) 、 选 择 DOM 元 素 、 创 建 动画 效果 、 处 理事 件 ,以 
及 开发 AJAX 程序 。 使 用 jQuery 框架 开发 的 另 一 个 优势 是 对 大 多 数 浏览 器 做 了 兼容 性 
优化 。 

jQuery 编程 首先 要 下 载 或 远程 引用 jQuery 库 文件 ,jQuery 提供 uncompressed( 非 压缩 
版 ) 和 minified( 压 缩 版 ,文件 名 会 加 X X X. min. js) ,在 线 引 用 可 以 考虑 压缩 版 库 来 提高 下 

(1) 远程 CDN 加 载 jQuery 库 。 





< script src = " http://ajax. googleapis. com/ajax/libs/jquery/1. 10. 2/jquery. min. js" >| 
</script> 
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(2) 或 从 官网 先 下 载 到 本 地 ,从 本 地 加 载 。 





< script src= "jquery/jquery/jquery. min. js"></script > 











(3) jQuery 的 最 常用 的 函数 是 CCS 选择 器 函数 
$ (“CSS 选择 器 ”) ,函数 $() 的 参数 就 是 CSS 的 选择 器 , 语 例子 4-14: 
法 跟 CSS 样式 一 样 。 例 子 4-14 是 通过 id 选择 器 #but 得 到 partl/eh4/jquery/jquery” 
input 对 象 ,并 调用 click() 单 击 事件 方法 ,再 通过 $C*h1”) 将 ”> h9 
hl 标签 的 文本 颜色 改 成 绿色 。 

















<hl id= "dl"> 改 变 CSS 样式 </hl > 
< input type = "button" id = "but" value = "变色 "></input> 








$("#but").click( function() {$("hl").css ("color", "green"); } ) 











(4) 常用 函数 如 下 。 和 
Q@ click() ,一 个 标签 元 素 的 单 击 事件 处 理 , 包 含 一 个 本 。 例子 #4-15: 
数 参数 作为 事件 处 理 的 调用 。 part1l/ch4d/jquery/hide. html 
@ hide() ,标签 元 素 隐藏 。 可 以 带 特效 参数 来 决定 元 素 
消失 的 速度 。 见 例子 4-15 。 
@ show() ,标签 元 素 显示 。 可 以 带 特效 参数 来 决定 元 素 【ER 
出 现 的 速度 。 例子 4-16: 
@ toggle() ,切换 事件 。 例 如 ,用 toggle() 方 法 来 切换 Partl/ch4/jquery/toggle. html 
hide() 和 show() 方 法 。 见 例子 4-16。 
@ css() ,修改 标签 元 素 样 式 。 


4.11 _ JavaScript 和 jQuery 代码 风格 


JavaScript 融合 了 传统 C 语言 和 面向 对 象 编程 的 编码 风格 ,jQuery 更 偏向 于 函数 风格 。 
(1) 网 页 : 





<hl id= "dl"> 改 变 CSS 样式 </hl > 
< input type = "button" id = "but" value= "变色 "></input> 





(2) 脚本 ,C 语言 编码 风格 : 定义 函数 ,定义 变量 。 





Window. onload = change; 

function change() { 
var button = ducoment. getElementById( "but" ); 
button. onclick = colorChange; 
function colorChange() { 
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Var hl = document. getElementsByTagName("h1"); 
hl[0]. style. color = "red"; 


1 





(3) JavaScript 面向 对 象 编码 风格 :“ 对 象 . 对 象 … 属性 一 值 ”。 





window. onload = function () { 
document. getElementByYId("but" ) . onclick = function () { 
document. getElementsByTagName("h1")[0]. style. color = "red"; 
} 





(4) jQuery 函数 型 风格 : 函数 (函数 (函数 ()))。 





$ (document). ready(function() { 
$ ("button# but").click(function() { 
$ ("hi").css("color", "green"); 


D); 











练习 

1. 简 述 把 代码 document. write(" 你 好 ! JavaScript") 写 在 < head > 和 < body > 标签 中 的 
区 别 。 

2. 修改 例子 4-8, 将 < a > 标签 的 单 击 事件 onclick 属性 变 成 JavaScript 的 事件 onclick 
代码 。 

3. 使 用 DOM 技术 和 onclick 事件 ,编写 代码 , 单 击 文字 可 以 改变 颜色 ,同时 也 改变 文 
字 的 字体 大 小 。 

4. 用 jQuery 日 期 控件 做 一 个 日 期 输入 。 

5. 修改 例子 4-11, 将 textl. txt 改 成 JSON 格式 文件 textl. json, 将 例子 4-12 中 的 
allstudent 对 象 保存 为 JSON 文件 ,通过 AJAX 技术 将 text1. json 文件 从 服务 器 传送 到 浏览 
器 端 ,并 转换 成 JS 对 象 。 
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互联 网 创造 出 由 无 数 网 页 十 数据 组 合 而 成 的 一 个 大 应 用 系 
统 , 而 网 页 的 最 基本 的 结构 仍然 是 HTML, 随 着 HTML 5 标准 的 发 
布 , 它 将 颠覆 传统 的 编程 语言 ,成 为 构造 互联 网 的 基石 语言 。 

HTML 5 的 规则 制定 是 为 了 解决 Web 应 用 问题 而 提出 的 。 早 
期 定义 的 HTML 十 CSS 十 JavaScript 标准 是 无 法 完成 一 个 复杂 的 
应 用 系统 的 ,而 不 得 不 借助 服务 器 端的 脚本 语言 来 完成 一 些 复杂 
的 应 用 ,例如 ,PHP、JSP、Ruby、Perl 等 。 特 别 是 移动 智能 手机 、 平 
板 电脑 时 代 到 来 ,浏览 器 厂商 开始 给 自己 的 浏览 器 添加 更 强健 的 
功能 来 完成 Web 应 用 ,由 此 引发 了 HTML 5 的 革命 。 

网 络 技术 的 发 展 也 促进 了 Web 应 用 的 普及 。 光 纤 实 现 了 最 
后 一 千 米 的 有 线 网 络 速度 从 100Mb/s 逐步 过 渡 到 1000Mb/s, 随 
着 移动 4G 网 络 的 普及 及 WiFi 技术 的 提升 ,无 线 网 络 的 速度 也 达 
到 300~~500Mb/s, 网 速 提升 改变 了 Web 应 用 的 实时 交互 障碍 。 
同时 ,移动 智能 设备 硬件 已 经 逐步 接近 桌面 计算 机 ,HTML 5 就 是 
针对 富 互联 网 应 用 而 提出 的 ,改善 B/S 结构 应 用 的 用 户 体验 ,是 
互联 网 应 用 的 趋势 之 一 。 


2016 年 ,Google 开始 彻底 放弃 Flash 技术 ,Google 的 广告 平 
台 和 视频 服务 平台 YouTube 改 用 HTML 5 作为 默认 视频 格式 。 美 
国 HTML 5 开发 者 利用 WebGL 和 WebSocket 技术 ,将 一 个 方程 
式 赛 车 场 搬 到 了 互联 网 上 。 虚 拟 现实 ,loT 物 联网 .3D、 在 线 游戏 
是 HTML5 开发 者 目前 所 关注 的 焦点 。 

本 篇 中 将 学 习 什 么 是 HTML 5, 了解 HTML 5 的 新 特征 。 
HTML 5 的 最 亮点 之 一 是 WebUl 设计 ,HTML 5 可 以 制作 很 酷 的 应 
用 界面 ,通过 HTML 5 的 JavaScript API 可 以 在 浏览 器 里 绘图 、 看 
视频 ,. 听 音乐 .离线 缓存 .访问 本 地 文件 .实现 数据 库 技 术 等 ,让 
Web 应 用 实现 跟 本 地 应 用 同样 的 功能 。 























和 欲 穷 千 里 目 , 更 上 一 层 楼 





HTML 5 概要 


5.1 HTML 标准 制定 时 间 表 


1968 年 ,美国 国防 部 高 级 研究 计划 署 (Defence Advanced Research Projects Agency， 
DARPA) 开 始 研 究 Internet, 当时 称 之 为 ARPAnet。1982 年 , ARPAnet 采用 TCP/IP。 
1983 年 ,美国 国家 科学 基金 会 (National Science Foundation ,NSF) 继 承 ARPAnet 的 技术 ， 
发 展 民用 的 NSFnet ,并 于 1990 年 建成 开放 的 Internet 主干 网 。 

当时 的 互联 网 主要 用 来 发 送 电子 邮件 和 文件 下 载 , 真 正 把 互联 网 用 来 阅读 的 是 得 益 于 
浏览 器 的 发 展 。1991 年 ,美国 国家 超级 计算 应 用 中 心 (National Center for Supercomputing 
Applications, NCSA ) 开始 开发 UNIX 浏览 器 ,但 是 ,直到 1994 年 , Mosaic 公司 发 布 
Netscape Navigator 这 款 运 行 于 微软 Windows 95 操作 系统 的 浏览 器 , 才 改 变 了 互联 网 的 应 
用 现状 ,Netscape Navigator 让 互联 网 家 喻 户 晓 。 也 就 是 一 个 小 小 的 浏览 器 ,让 普通 老百姓 
通过 互联 网 看 到 文字 和 图 片 ,从 而 改变 了 几 千 年 人 类 的 阅读 习惯 。1995 年 ,网 页 流量 达到 
21%% ,超过 了 FTP 文件 下 载 应 用 的 流量 (14%)。 

浏览 器 最 早 使 用 的 是 简单 的 超 文本 语言 ,并 没有 形成 统一 规范 ,浏览 器 厂商 各 自 为 政 。 
到 1993 年 6 月 ,互联 网 工程 工作 小 组 (IETF) 成 立 并 发 布 了 HTML 工作 草案 ( 非 标准 )。 到 
1995 年 ,万 维 网 联盟 (W3C) 成 立 , 才 开始 规范 HTML 标准 。 表 5-1 是 HTML 的 制定 时 
间 表 。 





表 5-1 HTML 发 展 史 




















年 代 版 本 主要 事件 
1990 以 前 HTML SGML( 标 准 通 用 标记 语言 ) ,文本 黑白 显示 ,浏览 器 为 Lynx 
1993 HTML 1.0 互联 网 工程 工作 小 组 (IETF) 成 立 ,图 片 ,列表 ,表单 ,浏览 器 有 Mosaic 
1995 HTML 2.0 W3C 在 MIT 成 立 , 作 为 HTML 标准 组 织 
1996 HTML 3.2 CSS 1,JavaScript 出 现 , Mosaic 的 元 素 , 属 性 和 数学 公式 的 支持 
1997 一 1998 HTML 4.0 CSS 2 
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续 表 
年 代 版 本 主要 事件 
1999 HTML 4.01 “| W3C 推荐 标准 
2000 XHTML 1.0 | HTML 4.01 十 XML ,严格 的 语法 检查 
2003 XHTML 2.0 | DIV 十 CSS 网 页 布局 流行 ,强制 浏览 器 拒绝 无 效 的 XHTML 2. 0 页面 
2004 一 2005 HTML 5 筹备 | AJAX 技术 出 现 , WHATWG 成 立 , 筹 备 制 定 HTML 5 
2008 HTML 5 W3C 放弃 XHTML, 采纳 HTML 5 
2014 HTML 5 正式 发 布 
5.2 HTML 5 的 发 展 





HTML 5 开始 由 Opera、Mozilla, Apple 一 群 思想 自由 的 团队 (WHATGW) 设 计 , 他 们 
突破 过 去 的 网 页 设计 禁区 ,通过 调用 更 多 的 本 地 资源 ,提升 页 面 表现 性 能 ,让 JavaScript 语 
言 与 HTML 功能 增强 。 例 如 ,增加 绘图 功能 ,文件 操作 功能 ,无 需 第 三 方 插件 (Flash 和 
Silverlight) 播 放 视频 ,这 将 被 大 量 应 用 于 移动 应 用 程序 和 游戏 ,达到 像 Java、C/C++ 的 应 用 
程序 的 功能 效果 。 

同时 HTML 5 放弃 了 严格 的 XHTML 标准 ,遵循 HTML 4. 01 的 非 严 格 语法 检查 ,无 
须 关闭 标签 ,不 区 分 大 小 写 ,属性 值 无 需 引 号 ,向 下 兼容 HTML 4. 01 标准 。 

HTML 5 是 开放 式 Web 标准 (Open Web Standard), 它 支持 所 有 被 废弃 的 标签 元 素 ， 
如 < font >、<frame>、<b> 等 。 

HTML 5 规范 又 分 成 两 部 分 ,针对 Web 开发 人 员 的 标准 ,要 求 不 使 用 被 放弃 的 元 素 和 
不 良 的 HTML 编码 习惯 ,提供 HTML 5 验证 器 规范 这 一 标准 。 同 时 ,又 提出 针对 浏览 器 开 
发 人 员 的 标准 ,鼓励 向 后 兼容 ,包容 所 有 的 标签 。 

HTML 5 标准 制定 的 目的 就 是 让 Web 开发 更 简单 ,交互 性 更 强 ,通过 HTML 5 十 CSS 3 十 
JavaScript 完成 所 有 高 级 计算 机 语言 能 完成 的 功能 。 

HTML 5 正在 成 为 下 一 代 移 动 互联 网 应 用 的 主流 开发 语言 ,各 种 基于 HTML 5 的 移 
动 互 联网 平台 开发 框架 开始 形成 移动 应 用 的 生态 开发 环境 ,移动 互联 网 厂商 纷纷 布局 
HTML 5 发 展 战略 ,如 Facebook、Amazon、Google 三 大 巨头 领军 HTML 5 行列 。2008 年 ， 
HTML 5 草案 诞生 ,同时 ,浏览 器 业界 下 .Chrome、Firefox、Safari 开始 支持 HTML 5。 到 
2014 年 12 月 ,W3C 终于 正式 发 布 HTML 5 标准 。 


5.3 HTML 5 在 移动 领域 的 应 用 


通过 HTML 5 十 CSS 3 十 JavaScript 的 新 特征 ,可 以 实现 : 

(1) Web App 与 原生 态 App 的 功能 相似 ,例如 , 拖 放 硬盘 存储 ,交互 ; 外 观 上 相似 , 例 
如 ,菜单 。 

(2) 跨 硬件 应 用 , Web App 兼容 桌面 、 智 能 手机 、 平 板 电脑 和 其 他 具有 浏览 器 的 设备 。 

(3) Web App 直接 应 用 客户 端 ,无 须 通 过 Apple App Store .Google Play 等 应 用 商店 
下 载 。 
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(4) 跨 平台 应 用 ,Web App 兼容 于 所 有 移动 操作 系统 平台 ,如 iPhone、iPad、Android、 


Windows Phone Firefox OS 。 


(5) 通过 应 用 缓存 和 本 地 存储 实现 离线 应 用 ,响应 速度 与 原生 App 一 样 。 
(6) iPhone \iPad iPod 不 支持 Flash 插件 ,但 是 HTML 5 编写 的 App 完全 可 以 通过 


iOS 的 Safari WebKit 浏览 器 播放 视频 。 


(7) 智能 手机 诞生 的 时 候 (2009) ,其 所 带 的 浏览 器 已 经 支持 HTML 5。 


5.4 HTML 5 十 CSS 3 十 JavaScript 规 


到 2009 年 已 有 很 多 现代 浏览 器 支持 HTML 5 规范 。 
所 示 。 


范 新 特性 


HTML 5 包含 的 新 特征 如 图 5-1 
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:| 本 地 存储 [浏览 历史 。 [地理 位 轩 
民 曙 他 > 
马 Web Worker es: 文件 离线 
图 5-1 HTML 5 新 特征 


HTML 5 新 标签 如 下 。 





(1) 标签 语义 化 ,如 < article >、< header >、< footer >; 形象 化 ,如 < meter >、< progress >。 
(2) 增加 表单 < input > 标签 的 type 属性 ,如 : type 一 tel\type 一 email。 


(3) 非 英 文 文档 支持 ,如 下 面 的 代码 用 < ruby > 标签 来 


显示 汉语 拼音 注音 。 





<ruby><rp><rt> ruby text </rt ></rp></ruby> 











(4) 淘汰 跟 CSS 样式 有 关 的 标签 ,如 < font>、< center 
HTML 5 新 属性 如 下 。 


A 


(1) 修改 、 淘 汰 一 些 标 签 、 属 性 ,增加 JavaScript 的 接口 属性 。 


(2) 增加 更 多 的 事件 属性 ,如 onerror、onscroll。 


(3) 适用 于 所 有 元 素 的 属性 (全 局 属性 ) ,如 hidden、draggable、contenteditable。 


(4) 放弃 框架 < frame >。 
强大 的 JavaScript API 功能 如 下 : 


(1) 加 强 对 移动 设备 的 支持 ,如 地 理 位 置 、 加 速度 计 、 陀 螺 仪 等 。 


(2) 本 地 数据 库 支持 。 
(3) 离线 应 用 。 
(4) 多 线程 。 
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(5) WebSocket 通信 协议 支持 。 

CSS3 新 功能 如 下 。 

(1) 把 功能 分 成 颜色 模块 .选择 器 模块 .背景 模块 .边框 模块 。 

(2) 颜色 : 增加 透明 度 .亮度 .饱和 度 。 

(3) 边框 : 有 圆 角 ,边框 图 形 、 轮 廓 。 

(4) 背景 文本 、 盒 子 阴影 .动画 、 三 维 变换 。 

(5) 选择 器 : 在 原 有 选择 器 id、class、 标 签 基 础 上 ,增加 了 更 多 的 伪 类 ,增加 属性 选择 器 
和 正则 表达 式 计算 。 

(6) 字体 : 自 定义 。 


5.5 HTML 5 与 浏览 器 


由 于 HTML 5 是 一 种 开放 式 标准 ,各 个 浏览 器 厂商 都 会 制定 各 自 的 标准 ,这 种 激励 创 
新 的 同时 ,也 产生 了 一 些 负 面 影响 ,造成 HTML 5 的 应 用 在 不 同 浏览 器 运行 时 ,得 到 的 效果 
不 一 致 ,或 一 些 功能 不 能 实现 ,也 就 是 我 们 常 说 的 浏览 器 兼容 问题 。 

首先 来 看 看 浏览 器 的 工作 原理 。 大 多 数 浏览 器 都 有 一 个 浏览 器 内 核 , 也 就 是 所 谓 的 排 
版 引擎 或 者 网 页 泻 染 引 擎 (Rendering Engine) ,及 JavaScript 引擎 ,如 图 5-2 所 示 。 


口 
名 
样 
Ea 
: 
编 
码 





图 5-2 浏览 器 的 工作 原理 


而 各 个 浏览 器 都 有 自己 独立 的 内 核 ,由 于 内 核 的 区 别 , Web 应 用 在 不 同 浏览 器 下 会 产 
生 一 些 差异 。 流 行 的 浏览 器 内 核 如 表 5-2 所 示 。 





表 5-2 浏览 器 内 核 比较 











排版 引擎 JavaScript 引擎 浏 览 器 

Trident | Chakra Windows 的 正 浏览 器 

Gecko JagerMonkey Mozilla Firefox 浏览 器 

KHTML | KJS Linux KDE 图 形 桌 面 的 浏览 器 内 核 ,Konqueror 浏览 器 





WebKit 


V8(Android,Chrome) 
Nitro(iOS Safari) 


WebKit 是 由 Apple 公司 从 KHTML 演变 而 来 , iOS Safari, 
Android Chrome 浏览 器 





Presto 





Carakan 





Opera 7.0 及 以 后 版 本 的 内 核 





第 5 章 HTML 5 概要 | 


WebKit 是 最 著名 的 开源 Web 引擎 ,来 自 于 Linux 的 Konkeror 浏览 器 ,V8 是 Google 
开发 的 开源 JavaScript 引擎 ,这 一 新 引擎 采用 了 预 编 译 来 加 快 JavaScript 的 执行 速度 ,所 
以 ,也 称 之 为 JIT(Justing In Time) 编 译 器 。 

自从 2014 年 12 月 W3C 联盟 正式 发 布 HTML 5 标准 后 ,各 个 浏览 器 厂商 都 会 在 2015 
年 以 后 的 发 行 版 中 支持 HTML 5 标准 ,所 以 ,最 新 版 本 的 浏览 器 (移动 和 桌面 版 ) 除 了 向 下 
兼容 HTML 4.01、XHTML、CSS 2. 1 外 ,基本 支持 大 部 分 HTML 5 及 CSS 3 标准 ,支持 
JavaScript\AJAX、DOM2 技术 。 今天 ,支持 HTML 5 的 常用 浏览 器 有 Windows Internet 
Explorer 9、Apple Safari 5、Google Chrome、Mozilla Firefox、Opera, 及 来 自 中 国 的 浏览 器 
360、.QQ 搜狗 . 邀 游 等 。UC 浏览 器 一 直 在 移动 市 场 上 加 强 HTML 5 支持 ,在 2013 年 发 布 
了 高 性 能 的 HTML5 游戏 引擎 X-Canvas。 

对 于 老 版 本 浏览 器 问题 ,例如 ,IE 6、7、8 版 本 的 浏览 器 ,可 以 安装 Google Chrome 
Frame 插件 来 支持 HTML 5 标准 ,或 在 Web 代码 中 添加 HTML 5 验证 及 回 退 机 制 来 
解决 。 

浏览 器 是 否 支持 HTML 5, 及 哪些 功能 支持 ,都 可 以 通过 浏览 器 打开 下 面 的 URL 地 址 
来 检查 。 

http://html5test. com/ 

http://caniuse. com/ 


html5test 网 站 用 于 检查 浏览 器 对 HTML 5 功能 支持 的 详细 信息 ,如 图 5-3 所 示 。 


Video 3 


!DOCTYPE html> triggers standards mode Yes video element Yesv 
HTMLS tokenizer Yes v |) Subttles Yesv 
HTMLS tree bullding Yes | Audio tack selection No x 

Video track selection No x 
HTM.S defines rules forembedding SVG and NimM. inside a regular 
HTML document The following tests only check ff the browser ls Poster images Yes 
folowing he HTM.S parsing rules forinine SVG and NethM., not fthe 
browser can actually understand and render Codec detection Yes ww 
i Ye 
Parsinginine SVG ov“ 国 
Parsing inline MathML Yes DRM su Ye v 
Media Source extensions Yes v 
Elements 26/3 Ew 
Embedding custom non-isible data Ys ww At Ru 加 
H.264 support Yes v 
New or modified elements bo ed oh Pe 
bp Yt Vv 
Snel 人 WebM with VP8 support Yes 
bp Yt Vv 
Grouping content elements es eo emp 
» Textlevel semantic elements Parial o 


图 5-3 ”html5test 网 站 的 检查 结果 


caniuse 网 站 甚至 可 以 检查 HTML 5 某 一 功能 在 全 世界 和 中 国 的 使 用 率 ,如 图 5-4 和 
图 5-5 所 示 是 < canvas > 绘图 功能 的 浏览 器 支持 情况 。 
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Canvas (basic support) -i's China 8602% + 0.15% = 86.17% 
站 Sa Global 91.82% + 49% = 96.72% 
Method of generating fast, dynamic graphics using JavaScript. 
Show 
上 Edge * Firefox Chrome safar opera ”iOssafai” OperaMini Androld * Chromefor 





图 5-4 浏览 器 支持 Canvas 绘图 功能 的 版 本 (IE 6/8 不 支持 ) 
Summary 
Calculation of support for currently selected criteria 


IE Edge * Firefox Chrome safarl Opera 。 iossafal” OperaMin’ Androld * Chromefor 


=-" [=m El Be 
em 


6 67% S50: 75% 





47 57% Sl: 75% 


5-5 浏览 器 支持 Canvas 绘图 功能 所 占 的 百分比 


5.6 HTML 5 验证 及 回 退 机 制 


由 于 HTML 5 是 开放 式 Web 标准 ,各 个 浏览 器 厂商 和 其 他 技术 标准 都 在 参与 制定 这 
一 标准 ,W3C 联盟 一 直 在 致力 于 管理 ,统一 HTML 5 标准 。 但 是 ,HTML 5 在 不 断 地 发 展 
创新 ,新 的 功能 会 不 断 在 各 个 浏览 器 中 出 现 , 所 以 ,在 编写 应 用 的 时 候 , 由 于 各 个 浏览 器 厂家 
的 标准 不 同 ,应 该 在 代码 中 加 入 HTML 5 功能 检测 ,以 便 实施 回 退 机 制 。 


5.6.1 HTML 5 功能 验证 


HTML 5 功能 检测 主要 通过 以 下 方式 。 
(1) 对 象 检测 。 
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(2) 创建 HTML 5 新 元 素 检测 新 元 素 属性 。 

(3) 检测 新 元 素 的 方法 是 否 能 返回 "true”。 

(4) 检测 新 元 素 返 回 的 属性 是 否 正确 。 例子 5-1: 

例子 5-1; 检测 不 同 浏览 器 是 否 支持 HTML 5 功能 ,可 part2/eh5/html5 function check/ 
以 在 代码 中 添加 不 同 的 HTML 5 功能 检测 。 SE bea 











5.6.2 HTML 5 的 回 退 机 制 


IE 6/7/8 浏览 器 问题 解决 方案 如 下 。 

通过 远程 调用 html5shiv JavaScript 脚本 来 创建 HTML 5 新 标签 ,让 老 版 本 IE 认识 
标签 ,并 能 套用 CSS 样式 ,但 不 能 使 用 新 标签 的 功能 及 属性 ,例如 < canvas > 的 绘图 功能 。 
例子 5-2 中 ,用 IE 6/7/8 版 本 打开 下 面 的 文件 。 

(1) ie678. html,< article > 标签 被 CSS 识别 。 

(2) ie678-diy. html, 用 JS 创建 的 < article > 标签 被 CSS 例子 5-2: 
识别 。 part2/ch5/ie678/ 

(3) ie678-not. html 中 ,< article > 标签 不 能 被 CSS 识别 。 

检测 HTML 5 的 目的 就 是 为 无 法 支持 的 功能 提供 降级 、 回 退 机 制 。 当 发 现 浏览 器 不 支 
持 时 : 

(1) 忽略 错误 或 显示 错误 信息 。 

(2) 提示 用 户 换 浏览 器 或 升级 浏览 器 。 

(3) 使 用 回 退 措施 ,采用 其 他 编码 方案 。 

(4) 采用 回 退 机 制 的 第 三 方 方 案 。 

Modernizr 是 比较 常用 的 回 退 机 制 的 第 三 方 方 案 。 

回 退 的 基本 方法 是 写 代 码 判 断 浏览 器 是 否 支 持 HTML 5 新 特征 ,而 Modernizr 为 我 们 
提供 了 自动 检测 新 特征 ,并 帮助 解决 回 退 功能 (兼容 不 支持 HTML 5) 的 浏览 器 。 

下 载 Modernizr 脚本 (www. modernizr. com) ,在 网 页 中 租 入 Modernizr 脚本 。 网 页 加 
载 时 会 自动 对 HTML 5 的 新 特征 进行 检测 ,并 自动 在 < html > 标签 加 入 class 来 说 明 支持 的 
特征 和 加 功能 前 级 no- 表 示 不 支持 的 特征 , 见 如 下 代码 。 











< html class = "js flexbox canvas canvastext webgl no - touch geolocation 
postmessage no - websqldatabase indexeddb hashchange history 
draganddrop no - websockets rgba hsla … "> 











Modernizr 通过 检查 这 个 class 值 来 决定 是 否 创建 一 个 基于 JS 的 回 退 ,如 果 有 不 支持 
的 特征 , 它 会 自动 进行 简单 的 优雅 降级 ,给 不 支持 的 新 样式 设置 一 个 替代 样式 。 另 外 ， 
Modernizr 还 可 以 通过 创建 HTML 5 的 新 标签 来 实现 CSS 3 样式 。 

通过 Modernizr 在 页 面 文件 < html > 中 设置 的 class 属性 来 定义 不 支持 的 回 退 方案 。 
例如 , 圆 角 边框 border-radius 支持 和 不 支持 的 CSS 设置。 例子 5-3 是 用 回 退 方案 来 模拟 
CSS 3 的 圆 边 角 , 代 码 如 下 。 
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例子 5-3; 
part2/ch5/mm. html 


header {background - color: #6454fe; 
text — align:center;} 
.borderradius header { 
border: thin #233445 solid; 
Border — radus: 18px; 
! 
.no 一 borderradius header { 
border: 6px #233445;} 











练习 


1. 使 用 http://html5test. com/ 和 http://caniuse. com/ 检 查 你 的 浏览 器 支持 HTML 5 的 
情况 。 
2. 用 不 同 浏览 器 打开 例子 5-1 ,检查 它们 支持 HTML 的 情况 。 

3. 参考 例子 5-3 中 的 代码 ,定义 一 个 header 标签 (作为 标题 区 ) ,用 Modernizr 回 退 框 
架 及 CSS 编码 定义 圆 角 样式 ,及 浏览 器 不 支持 圆 角 功能 的 降级 方案 。 


第 < 


;前 


人 <a 





HTML 5 网 页 布局 新 元 素 


6.1 语义 化 标签 元 素 

HTML 5 的 一 个 重要 规则 就 是 制定 了 语义 化 的 标签 来 替代 传统 的 DIV 十 CSS 的 布局 
方式 ,也 就 是 说 ,有 了 语义 化 标签 ,可 以 减少 在 每 个 div 里 面 的 id 属性 。 因 为 语义 化 标签 本 
身 包含 某 一 个 网 页 块 的 含义 ,例如 ,< header > 标签 就 是 用 来 制作 一 个 页 面 的 标题 栏 或 一 个 
文章 的 标题 栏 。 语 义 化 标签 使 搜索 引擎 更 容易 理解 网 页 内 容 的 含义 。 

网 页 是 结构 化 的 文档 ,一 个 普通 的 网 页 会 包括 标题 栏 .导航 栏 . 主 信息 栏 .边栏 ` 页 脚 栏 。 
HTML 4 通过 < table >、< div > 和 CSS 结合 完成 网 页 文档 的 结构 化 布局 。 例 如 ,HTML 4 
的 布局 代码 < div id 王 "nav">、< div class 一 "header"> 或 < div id 一 "footer">。 

HTML 5 引入 语义 化 的 新 元 素 , 来 完成 布局 (如 图 6-1 所 示 ) ,而 不 用 依赖 < div > 和 
<table >。 文 档 用 语义 化 元 素 布局 ,元 素 不 会 因为 语义 而 定位 于 浏览 器 的 某 一 位 置 ,还 要 通 


<nav> 导 航 栏 元 素 | 








6-1 HTML 5 的 语义 化 标签 元 素 
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过 CSS 样式 定位 ,但 是 语义 化 元 素 可 以 生成 文档 大 岗 的 层次 结构 ,便于 搜索 引擎 搜索 。 当 
搜索 引擎 搜索 该 网 页 时 ,知道 这 个 标签 语义 理解 文本 内 容 。 此 外 ,语义 化 元 素 提 高 了 辅助 技 
术 (WAIARIA) 可 访问 性 ,例如 ,屏幕 阅读 机 。 便 于 SEO 搜索 引擎 优化 ,简化 HTML 代 
码 ,提高 代码 可 维护 性 和 阅读 。 


6.2 HTML 5 文档 纲要 


为 了 阅读 方便 ,文档 被 分 成 不 同 的 章节 。HTML 4 采用 标题 级 别 标签 HI 一 H6 隐 含 地 
创建 相应 的 章节 大 纲 。 而 div 标签 是 无 法 形成 大 纲 效果 的 ,如 果 文档 用 < div > 嵌 套 ,章节 会 
出 现 混 乱 。 

目前 ,大 多 数 浏览 器 还 不 能 提供 生成 纲要 的 功能 ,但 是 可 以 在 线 检查 纲要 的 编排 是 否 合 
理 。 在 线 纲要 生成 器 : 





http://gsnedders. html5. org/outliner 例子 6-1: 
Chrome 和 Opera 浏览 器 要 加 入 扩展 插件 。 Part2/ch6/section/ div- 
h1h2. html 


例子 6-1 是 用 div 和 hl,h2… 产 生 的 纲要 效果 ,hl、h2 产 
生 默 认 的 纲要 ,div 没有 形成 纲要 ,如 图 6-2 所 示 。 


hs 1. 标题 Al 
Se 1， 标题 A1-1 
<h1> 标 题 B1</h1> 2. 标题 B1 


a 1 标题 B1-1 








图 6-2 用 div 嵌 套 产生 的 纲要 


6.3 分 节 ( 分 块 ) 元 素 


在 这 些 语义 化 新 元 素 中 ,有 4 个 具有 分 节 的 性 质 ,它们 是 <article >、<aside >、< nav> 和 
< section >。 也 就 是 说 ,把 文档 分 成 不 同 的 小 节 ( 块 ) ,根据 节 在 文档 中 的 位 置 来 使 用 这 些 语 
义 化 的 元 素 , 并 产生 嵌 套 大 纲 。 即 分 节 元 素 里 有 独立 的 纲要 。 

(1) article: 一 个 完整 的 文章 部 分 ,如 论坛 帖子 ,博客 文章 或 用 户 的 评论 。 

(2) aside: 网 页 的 一 个 特殊 区 域 ,相对 孤立 , 像 一 篇 文章 的 侧 边栏 引言 。 

(3) nav: 文档 中 的 导航 区 域 ,菜单 ,可 以 链接 到 其 他 文档 或 同一 文档 其 他 部 分 。 

(4) section: 定义 页 面 的 一 个 部 分 ,该 部 分 可 以 为 页 面 的 大 纲 创 建 一 个 新 节 。 例 如 , 书 
中 的 一 个 章节 ,页 面 的 一 个 对 话 框 ,或 者 网 站 主页 上 的 一 个 前 言 介 绍 。 

例子 6-2 包含 hl ,h2… 的 标签 隐 含 纲要 效果 ,但 是 分 节 
元 素 < section > 能 把 标题 Bl 作为 标题 A1-1 的 同 级 纲要 。 运 例子 6-2: 


行 例子 6-2, 再 通过 纲要 在 线 检测 器 看 到 的 效果 如 图 6-3 Part2/ch6/section/。 section- 
所 示 。 h1h2. html 
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<hl> 标 题 A1</hl> 把 标题 Al 
a 1， 标 题 Al-1 
<hl> 标 题 B1</h1> 2. 标题 Bl 


<h2> 标 题 B1-1</h2> 1. 标题 B1-1 


<section> 





图 6-3 用 section 产生 的 纲要 效果 


6.4 section 元 素 


网 页 的 文档 是 一 个 具有 主题 分 类 的 内 容 , 通 常 拥有 至 少 一 个 标题 ,通过 section 生成 文 

档 大 纲 中 的 节 ,也 就 是 说 把 文档 分 成 有 层次 的 节 。 相 当 于 HTML 4 中 的 < div >< span > 块 

元 素 。 但 是 div 和 span 没有 节 的 属性 。 
文档 进行 块 分 类 时 ,也 可 以 用 < section > 标签 把 相对 独立 。 例子 6-3: 

的 部 分 分 离 出 来 。section 标签 比 作为 段落 的 < p > 标签 富有 Part3/ch6/section/sect. html 

更 多 的 属性 。 例 子 6-3 是 用 分 节 元 素 做 出 的 文章 结构 。 





6.5 article 元 素 

一 个 可 以 完整 的 、 独 立 存在 的 文档 ,可 以 用 article 标识 。 人 鲍 子 4。 
这 样 有 利于 搜索 引擎 和 无 障碍 阅读 设备 识别 网 页 的 主要 内 。 resection 
容 ,进行 索引 和 朗读 。 例 子 6-4 是 用 article 元 素 制作 出 的 


文章 。 
6.6 aside 元 素 一 
与 主要 内 容 关系 不 大 的 东西 可 以 放 到 < aside > 标签 里 ， 多 /csion/ 


作为 附属 说 明 的 内 容 。 例 子 6-5 是 用 aside 元 素 制作 出 的 作 。 aside. html 
者 相册 。 


6.7 nav 元 素 


nav 用 来 作 网 页 的 菜单 导航 。 其 实 , 在 一 个 网 页 中 导航 的 意义 很 广泛 ,例如 ,一 篇 文章 的 
末尾 会 有 相关 文章 (如 图 6-4 所 示 ) ,一 个 新 闻 的 末尾 也 会 有 相 
关 新 闻 链 接 , 这 些 都 可 以 用 导航 < nav > 标识 。 例子 6-6: 

例子 6-6 是 用 nav 元 素 制 作出 的 导航 菜单 。 part2/ch6/section/nav. html 
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相关 资讯 

s KaOS 2016.04 发 布 ,桌面 Linux 发 行 .。2 周 前 

s Openindiana 2016.04 发 布 ，OpenSol.，。2 同 前 

9 NixOS 16.03 发 布 ，GNU/Linux 发 行 .。 1 个 月 前 

9 GNU GuixSD 0.10.0 发 布 ，GNU 软件 包 .1 个 月 前 
9 Parsix GNU/Linux 8.10 发 布 ，Linux-。 1 个 月 前 

= GNU 项 目 发 布 Gneural Network 神经 .。 2 个 月 前 


vw Chakra SNU/inux 2016.02 发 布 .。2 个 月 前 


。 3 个 月 前 





图 6-4 一 篇 “AryaLinux 2016. 04 发 布 ”文章 后 的 相关 资讯 链接 


6.8 <details> 和 


< summary > 元 素 


< details > 和 < summary > 需 结 合 使 用 , 单 击 < summary > 标签 可 以 展现 < details > 的 内 


容 ,相当 于 折 笃 框 的 效果 。 


下 面 是 部 分 代码 ,具体 见 例子 6-7。 





</details> 








details. style. display 





var details = document. getElementById( "details"); details. 
onclick = details. style. 


display = "none"; // 隐 藏 
= "block"; // 显 示 








6.9 < figure > 和 < figcaption > 元 素 


文章 中 常常 引用 图 片 ,而 img 标签 需要 定义 属性 title 或 alt 来 说 明 图 片 的 内 容 ， 
HTML 5 中 的 < figure > 和 < figcaption > 结合 img 使 用 ,可 以 让 图 片 更 具有 可 识别 性 。 如 例 


子 6-9 的 代码 。 





<figure> 


<figcaption> 

<p> 作 者 头像 </p> 
</figcaption> 
<figure> 





< img src = "images/qq_logo. png" 
alt = "QQ"height = "100" width= "100"> 








<details> 

例子 6-7: 
< summary > 邮件 地 址 </summary > part2/ch6/section/ detail- 
<p> 中 国 广西 南宁 市 …</p> summ. html 


如 果 浏 览 器 不 支持 该 元 素 , 还 可 以 用 JavaScript 实现 同样 的 效果 , 见 例子 6-8。 


例子 6-8: 
part2/ch6/section/ detail- 
summ-js. html 





例子 6-9: 
part2/ch6/section/fig- 
capt. html 
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6. 10 < address > 与 < footer > 元 素 


<address > 地 址 标签 ,顾名思义 ,表示 联系 地 址 ,一 般 放 在 < footer > 页 脚 标签 里 面 。 代 
码 如 下 。 





< footer >< address > 南宁 学 院 龙 亭 路 8 号 </address ></footer> 











6.11 < meter > 元 素 


< meter > 用 来 标记 一 个 测量 范围 。 所 以 测量 对 象 必 须 有 最 小 值 min 和 最 大 值 max。 
如 果 浏 览 器 不 支持 < meter > ,将 不 显示 棒 形 条 , 仅 显 示 < meter > 标签 之 间 的 文字 。 测 量 值 的 
状态 可 以 通过 棒 形 条 的 颜色 绿 、 黄 、 红 来 表示 ,颜色 变化 是 通过 测量 值 value 与 optimum 最 
佳 值 的 low 和 high 值 的 对 比 来 决定 的 ,规则 如 下 : 

(1) 当 定 义 low 人 optimum 人 high 时 : 

@ 绿色 : low 二 value<high 

@ 黄色 : value < low,value > high 

(2) 当 定 义 optimum < low 时 : 

@ 绿 色 : value < low 

@ 黄色 : value>low 

名 红色 : value 二 high 

(3) 当 定 义 optimum > high 时 : 

OO 绿色 : value> high 

@ 黄色 : low 迄 value 近 high 

@ 红色 : low < value 

例子 6-10 的 代码 如 下 : 





例子 6-10: 
CPU 温度 < meter low = "80" hight = "88" max = "90" optimum = part2/ch6/section/ 
"70" title= "degrees" value = "75" > 正常 </meter> meter. html 











meter 元 素 属 性 见 表 6-1,meter 的 外 观 可 以 通过 自 定义 CSS 来 改变 。 
表 6-1 meter 元 素 属 性 























属 性 说 明 属 性 re 
本 测量 最 小 值 范围 ,默认 0 最 佳 值 , 如 果 optimum > high, 实 际 值 越 
测量 最 大 值 范围 ,默认 1 optimum “| 大 越 好 ,optimum < low, 实 际 值 越 小 越 
i 间 于 好 ,该 值 必须 在 min 与 max 之 间 
value 当前 值 
low 最 低 边界 值 titles 单位 
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6. 12 < progress > 元 素 

< progress > 表示 任务 进度 , 它 用 来 表示 动态 的 进度 条 ,例如 ,文件 下 载 、 观 看 视频 的 进 
度 等 。progress 具有 的 属性 见 表 6-2。 

< progress > 元 素 的 默认 外 观 样 式 决 定 于 浏览 器 ,我 们 可 以 通过 CSS 来 自 定义 
<progress > 的 样式 ,JavaScript 可 以 抓 取 并 修改 这 些 标签 的 语义 化 数据 。 如 下 是 例子 6-11 
的 代码 。 








文件 下 载 中 < progress max= "1000" value = "120" title = "mb"> 12 $% </progress>… 








表 6-2 ”progress 元 素 属性 























属 性 说 明 
title 单位 例子 6-11: 
position 只 读 属 性 ,当前 的 进度 位 置 一 value/max ee 
value 当前 值 ,可 以 是 整数 或 浮 点 型 = 
label 只 读 属 性 ,返回 label 集 
<progress > 与 < meter > 元 素 的 区 别 在 于 ,< meter > 的 最 小 值 和 最 大 值 必须 是 确定 的 ， 


而 < progress > 的 max 可 以 不 定义 。 另 外 一 个 区 别 是 ,< meter > 元 素 的 最 小 值 可 以 是 一 个 浮 
点 数 ,包括 负数 ,例如 表示 温度 的 值 。 此 外 ,meter 和 progress 都 是 内 联 元 素 (inline) , 它 用 
图 形 来 代替 文字 ,标签 间 的 文字 是 不 会 显示 出 来 的 。 


6.13 < time > 元 素 
< time > 表示 日 期 或 时 间 , 其 属性 见 表 6-3。 
表 6-3 ”time 元 素 属性 

















属 性 说 明 
i 格式 化 编辑 的 日 期 时 间 , 可 以 被 搜索 引擎 和 JavaScript 抓 取 

pa bool 类 型 ,标记 上 一 级 文档 ,例如 ,article > 元 素 为 整体 的 发 布 出 版 时 间 。 
A 加 上 这 个 属性 就 把 时 间作 为 发 布 时 间 
label 只 读 属性 ,返回 label 集 





< time > 无 法 标记 公元 前 时 间 ,datetime 日 期 \ 时 间 格 式 如 下 。 


(1) 日 期 YYYY-MM-DD。 

(2) 时 间 : HH:MM:SS 十 时 区 (时 :分 : 秒 十 时 区 )。 例子 6-12: 

(3) UTC: HH:MM:SSZ( 时 :分 : 秒 时 区 )。 Part2/ch6/section/ timedate. 
html. 


(4) 日 期 时 间 : YYYY-MM-DDTHH :MM :SS。 
演示 见 例子 6-12。 


6.14 非 英 语 的 国际 化 元 素 


通过 < bdo>、<rp>< rb>,<rt>,< ruby > 这 些 标签 ,可 以 给 非 英 语 的 语言 标注 。 例 


子 6-12 显示 了 中 文 的 汉语 拼音 。 
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<p>Hello, 

<ruby> 

<rb> 信 息 工程 学 院 </rb> 

<rp>(</rp> 

<rt> xin xi gong chéng xie YUan </rt> 
<rp>) </rp> 

</ruby> 

</p> 








例子 6-13 中 ,把 文本 倒 写 的 代码 如 下 。 





<p> 

用 bi-directional override (bdo), 从 右 向 左 输出 (rtl1); 
</p> 

<bdo dir = "rtl"> 

Here is some Hebrew text 

</bdo> 





EE 
例子 6-13: 
part2/ch6/section/ruby. html 








6.15 其 他 语义 化 元 素 


<hgroup > 标签 已 经 被 HTML 5 放弃 ,还 有 一 些 语义 化 标签 ,如 < mark > 用 于 加 亮 文 


本 ,<em> 用 于 定义 被 强调 的 文本 ,< strong > 用 于 定义 对 





和 要 的 文本 ,< small > 用 于 附属 细则 ， 


< cite > 用 于 定义 引用 内 容 ( 作 品 标题 ) ,相当 于 文档 中 有 书 名 号 或 加 引号 的 内 容 ,< wbr > 用 
于 软 换行 ,及 第 7 章 将 提 到 的 通过 microformats( 微 格式 ) 来 自 定义 语义 化 标签 。 


6.16 语义 化 标签 小 结 
语义 化 分 成 两 部 分 : 布局 语义 ,文档 内 容 语 义 。 


这 是 一 个 语义 化 布局 首页 : part2/ch6/newsemantic/home. html。 

没有 定义 CSS 样式 的 一 个 博客 页 面 : part2/ch3/newsemantic/template. html。 

加 入 CSS 样式 的 博客 页 面 : part2/ch3/newsemantic/templated. html 。 

回 退 ,降级 问题 : 为 了 不 兼容 HTML 5 的 浏览 器 ,可 以 加 入 Modernizr, 针 对 IE 6/7/8， 


还 可 以 加 入 以 下 代码 。 





-ld ItIE9 
< Script type= "text/javascript"> 




















54 1 移动 Web 应 用 开发 教程 一 -HTML 5+JavaScript 框 架 全 栈 App 开 发 




















document. createElement("nav" ); 
document. createElement ("header); 
document. createElement ("footer"); 
document. createElement ("section"); 
document. createElement ("aside" ); 
document. createElement ("article"); 
</script> 
<![endif] --> 











练习 

1. 例子 6-1 中 的 div-hlh2. html, 有 两 个 包含 hl ,h2… 的 < div > 标签 ,修改 代码 ,让 < div > 
嵌 套 与 不 能 套 ,查看 分 节 标 签 的 效果 。 

2. 在 例子 6-6 代码 基础 上 修改 布局 ,通过 设置 CSS, 将 article 标签 内 容 布局 在 页 面 中 
间 ,aside 和 nav 分 别 布局 在 左右 。 

3. 修改 例子 6-7 中 detail-summ-js. html 的 代码 ,要 求 有 三 角 图 标 , 来 模仿 < details > 和 
< summary > 标签 的 效果 。 

4. 例子 6-10 中 ,调整 CPU 参数 值 , 当 CPU 温度 低 于 70C 正常 ,显示 绿色 ,CPU 温度 
高 于 70C 显示 黄色 ,温度 高 于 80C 显 示 红 色 。 


第 47/ 章 


微 格式 与 微 数据 的 语义 化 布局 


7.1 格式 化 数据 


网 页 的 数据 包括 文字 图片、 视频 ,音频 信息 等 非 结 构 化 数据 ,由 于 机 器 无 法 识别 这 些 数 
据 的 内 容 信息 ,造成 搜索 引擎 的 搜索 结果 不 够 准确 。 虽 然 人 工 智能 在 不 断 地 发 展 , 对 自然 语 
言 甚至 图 片 识别 的 理解 有 所 进步 ,但 是 ,最 快捷 的 方法 就 是 在 数据 的 源头 进行 数据 的 结构 
化 ,网 页 信息 通过 微 数据 、 微 格式 、 自 定义 数据 格式 的 HTML 规范 来 给 现 有 的 Web 内 容 添 
加 语义 ,这 就 是 称 为 “语义 网 ”Semantic Web) 的 下 一 代 互 联网 。 这 样 可 以 让 搜索 引擎 精准 
识别 内 容 信息 ,并 利用 这 些 信息 提供 更 好 的 浏览 体验 。 网 页 数据 格式 化 也 是 SEO 的 目标 
之 一 。 


7.2 微 数据 


由 于 机 器 很 难 识别 网 页 里 面 内 容 的 意义 ,例如 ,哪些 是 人 名 ,哪些 是 地 名 ,为 此 ,可 以 通 
过 微 标记 来 给 特定 内 容 加 标识 ,让 机 器 识别 ,及 让 搜索 引擎 抓 取 有 意义 的 内 容 。 

微 数据 的 标准 首先 是 由 Google、Bing、Yahoo 三 家 搜索 引擎 巨头 发 起 ,谷歌 关于 微 数 据 
的 定义 是 "HTML 5 微 数据 规范 是 一 种 标记 内 容 以 描述 特定 类 型 的 信息 ,例如 评论 、 人 物 信 
息 或 事件 。 每 种 信息 都 描述 特定 类 型 的 项 ,例如 人 物 、 事 件 或 评论 。 例 如 ,事件 可 以 包含 场 
地 、 时 间 、 名 称 和 分 类 属性 ”。 


7.2.1 微 数 据 标记 


微 数据 是 通过 HTML 标签 添加 属性 来 标识 的 ,并 没有 
专用 的 标签 。 大 多 数 HTML 标签 都 可 以 标记 微 数据 属性 。 例子 1: 
例子 7-1 中 使 用 微 数据 属性 标识 的 代码 如 下 。 Dart2/eh?7/mierodata. html 
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< section itemscope itemtype = "http://data - vocabulary. org/Person"> 
< span itemprop = "name"> 周 化 钢 </span> 

< span itemprop = "title"> 高 级 工程 师 </span> 

< span itemprop = "affiliation"> 南 宁 学 院 </span> 











</section> 

微 数 据 定义 方法 如 下 。 

(1) 首先 在 父 标签 标记 数据 项 itemscope, 是 一 个 布尔 值 ,表示 下 面 的 标签 开始 定义 微 
数据 。 

(2) itemtype 定义 一 个 远程 的 URL 字典 库 , 例 如 描述 评论 的 词汇 ,描述 事件 的 词汇 ,用 

(3) 然后 数据 项 的 子 标签 说 明 数据 属性 itemprop, 它 的 值 就 是 在 Person 数据 字典 里 面 
定义 好 的 ,不 能 修改 。 


(4) itemid 属性 ,用 于 给 数据 项 指定 唯一 序号 ,以便 被 其 他 数据 项 引用 。 
(5) itemref 属性 ,通过 使 用 html 标记 或 itemid 来 引用 另 一 个 微 数据 ,如 下 面 代码 所 示 。 





<div itemscope itemref = "location"></div> 











7.2.2 微 数据 词汇 表 


目前 , 微 数据 有 三 个 词汇 表 : schema. org 词汇 表 ,Google 富 摘 要 词汇 表 (www. data- 
vocabulary. org) 和 WHATWG/microformats. org 词汇 表 。 通 过 itemtype 的 值 指向 词汇 表 
的 URL 地 址 ,词汇 表 提供 了 互联 网 上 常用 的 词汇 。 以 下 是 Google 常用 的 词汇 表 。 

(1) Breadcrumbs 一 一 定义 整个 网 站 的 面包 届 结 

(2) Businesses and Organizations 一 一 定义 公司 结构 和 相关 联系 信息 。 

(3) Events 一 一 事件 时 间 。 

(4) Product Information 一 一 定义 产品 分 类 数据 。 

(5) People 一 一 关于 人 及 其 联系 信息 。 
定义 烹调 菜谱 ,营养 成 分 ,食材 制作 方法 。 
(7) Reviews and ratings 描述 评价 和 评分 的 通用 格式 。 
下 面 是 关于 出 版 书 的 部 分 词汇 集 。 


itemprop 一 name 书 名 





(6) Recipes 





itemprop 一 image 封面 

itemprop 一 isbn 国际 通用 标准 书号 
itemprop 一 author 作者 

itemprop 王 publisher 出 版 社 
itemprop 一 datePublished 出 版 日 期 
itemprop 王 bookEdition 版 次 
itemprop 王 bookFormat 装帧 
itemprop 一 numberOfPages 页 数 
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itemprop 一 inLanguage 使 用 文字 


7.2.3 微 数 据 取 值 


以 上 例子 的 微 数据 定义 , 它 的 值 都 是 标签 里 的 文本 ,例如 ,name 二 " 周 化 钢 "。 根 据 不 同 
的 标签 元 素 , 微 数据 取 值 是 不 同 的 ,例如 ,<a > 里 面 定 义 了 itemprop 二 "url", 它 的 值 url 应 该 
是 href 的 值 , 即 www. nnxy. cn, 如 以 下 代码 所 示 。 





<a href = "http://www. nnxy. cn/”itemprop = "url"> 南 宁 学 院 </a> 











更 多 的 微 数 据 取 值 见 表 7-1。 























表 7-1 微 数据 取 值 

标签 元 素 微 数据 值 
< meta> content 属性 
<audio><embed>< iframe>、<img >、< source>,<video> src 属性 
<a>.<area>.<link> href 属性 
<object> data 属性 
<time> datetime 属性 
其 他 标签 元 素 文本 内 容 





7.2.4 访问 微 数据 


HTML 5 定义 了 一 些 DOM API, 用 来 从 Web 页 面 中 提取 微 数 据 的 属性 值 ,也 就 是 通 
过 JavaScript DOM API 访 问 微 数据 , 见 表 7-2。 但 是 ,目前 支持 这 些 接口 的 浏览 器 还 不 多 。 


表 7-2 访问 微 数据 的 JavaScript DOM API 











属性 方法 说 明 
document. getItems( [ types ] ) 返回 包含 microdata[types] 的 元 素数 组 
element. properties 返回 HTMLPropertiesCollection 对 象 的 所 有 元 素 属 性 
element. itemValue [ = value ] 返回 一 个 元 素 的 值 








通过 微 数据 的 值 对 集合 接口 HTMLPropertiesCollection 的 实例 collection 对 象 访问 
itemprop 的 属性 、 方 法 , 见 表 7-3。 


表 7-3 通过 collection 对 象 访问 微 数据 


























属性 方法 说 明 
length 集合 中 元 素 对 象 和 
item(index) 通过 index 索引 index 访问 元 素 
nameditem(name) 使 用 itemprop 中 的 name 属性 来 访问 对 象 
nameditem(name). getValues() 访问 itemprop 中 指定 的 name 中 的 属性 值 
names 返回 所 有 itemprop 的 属性 名 的 数组 
names. item(index) 使 用 itemprop 属性 值 的 对 象 值 
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7.2.5 微 数 据 的 应 用 


微 数据 用 于 互联 网 搜索 引擎 抓 取 精 确 数据 ,例如 ,通过 微软 Bing 可 以 搜索 到 带 有 微 数 
据 格式 的 网 页 效果 。 下 面 是 大 众 点 评 网 站 使 用 面包 眉 (breadcrumb) 微 数据 格式 代码 。 





<div class = "breadcrumb"> 

<a href = "http://www. dianping. com/shanghai/food" itemprop = "url"> 

上 海 餐厅 </a> &gt; 

<a href = "http://www. dianping. com/search/category/1/10/r5" itemprop = "url"> 
浦东 新 区 </a> ggt; 

<a href = "http://www. dianping. com/search/category/1/10/r802" itemprop = "url"> 
八佰伴 </a> ggt; 

<a href = "http://www. dianping. com/search/category/1/10/g113r802" itemprop = "url"> 
日 本 菜 </a> ggt; 

<a href = "http://www. dianping. com/search/category/1/10/g225r802" itemprop = "url"> 
日 式 烧烤 / 铁 板 烧 </a> ggt; 

< span > 和 彩 精 致 海鲜 铁 板 烧 (商城 路 店 )</span> 


</div> 











如 图 7-1 所 示 的 大 众 点 评 是 通过 Bing 搜索 的 结果 ,其 中 通过 微 数据 加 入 了 面包 导 格 式 
的 效果 : 





雄 丰 真相 说 2863 人 评 从 人 均 : ¥281 区 域 ， 浦东 新 区 
点 评 : 环境 还 不 错 ， 干 净 整 洁 ， 服 务 员 也 很 有 礼 胃 ， 迎 宾 也 很 热情 ! 进门 的 地 方 有 个 小 鱼 
负 ， 旁 边 就 是 靠 窗 的 ， 位 于 还 是 比较 喜欢 的 ， 可 以 看 的 阳台 ,可 是 … 


dianping.com， 上 海 餐厅 ， 浦东 新 区 八 鸽 伴 ; 日 本 菜 ; 日 式 烧 烧 / 铁 板 烧 2016-2-15 





图 7-1 大 众 点 评 微软 搜索 结果 


微 数 据 还 可 以 在 不 同 应 用 之 间 进 行 数据 交换 ,例如 ,可 以 将 微 数据 的 联系 人 转换 成 
JSON 数据 格式 ,将 从 Web 应 用 获取 的 联系 人 发 给 原生 应 用 
软件 。Opera 浏览 器 工程 师 开发 的 检测 工具 Live Microdata ”例子 7-2: 

(https://foolip. org/microdatajs/live/), 可 以 把 微 数 据 格式 Part2/ch7/vevent. html 
转换 成 JSON 格式 。 例 子 7-2 是 通过 event. js 将 Hevent 转 
换 成 Vcalendar。 

下 面 是 谷歌 的 微 数 据 工具 ,为 开发 微 数据 提供 帮助 。 

(1) https://www. google. com/webmasters/markup-helper/? hl 二 en, 在 线 帮助 ,给 一 
个 网 页 提供 添加 微 数据 的 建议 。 

(2) http://www. google. com/webmasters/tools/richsnippets, 在 线 检测 网 页 的 微 
数据 。 

(3) https://developers. google. com/search/docs/guides/search-gallery # reviews, 微 
数据 的 一 些 样 例 。 
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7.3 微 格 式 


为 了 在 不 同 应 用 程序 中 分 享 数据 , 微 格式 是 给 软件 定义 统一 的 数据 格式 规范 ,例如 , 通 
讯 录 ,可 以 制作 成 Vcard, Hcard(Web) 的 数据 格式 ,这 样 就 可 以 在 微 信 、QQ、 电 子 邮 件 、 
Android\iOS 手机 之 间 分 享 。 和 微 数据 有 点 儿 类 似 , 微 格式 的 一 些 例子 如 hcalendar (日 
历 ) ,hreview( 评 论 ) 。 


7.3.1 标记 微 格式 数据 


微 格式 是 通过 HTML 的 class 属性 来 标识 数据 的 ,而 且 是 一 个 数据 集 ,例如 ,hcard 表 
示 通 讯 录 或 名 片 ,用 HTML 标识 的 电子 名 片 称 为 hCard, 通 用 的 电子 名 片 为 vCard, 文 件 扩 
展 名 为 . vcf。 在 HTML 中 定义 微 格式 ,也 有 一 个 标准 的 字典 ,例如 ,描述 名 片 的 词汇 有 : 

(1) fn: 名 字 。 

(2) org: 单位 。 

(3) title: 头衔 。 

(4) adr: 地 址 。 

例子 7-3 中 用 微 格式 描述 数据 代码 如 下 。 








RE 
幼子 7-3: 
part2/ch7/microformat. html 


< strong class = "fn"> 周 化 钢 </strong> 

< span class = "org"> XX 学院 </span> 

< span class = "title"> 软 件 高 级 工程 师 </span> 
< span class = "adr">…</span> 














7.3.2 微 格式 工具 


可 以 通过 微 格式 官方 网 站 的 工具 (http://microformats. org/code/hcard/creator) 创建 
hCard 微 格式 的 HTML 代码 。 

目前 许多 浏览 器 (包括 手机 移动 浏览 器 ) 都 支持 微 格式 ,例如 浏览 器 Firefox 和 chrome。 
浏览 器 一 旦 检测 到 有 微 格式 的 页 面 如 hCard 的 信息 ,通过 单 击 就 可 以 自动 保存 到 手机 或 电 
脑 的 通讯 录 , 或 导出 为 vcf 格式 文件 与 其 他 移动 设备 进行 名 片 交 换 。 通 过 安装 微 格式 的 浏 
览 器 插件 也 可 以 帮助 开发 者 检查 网 页 的 微 格式 ,例如 ,Chrome 的 插件 Microformats。 

http://h2vx. com 是 在 线 微 格式 转换 工具 ,将 网 页 的 微 格式 标记 转换 成 vcf 格式 文件 
并 下 载 , 作 为 数据 交换 的 通用 文件 。 


7.3.3 微 数据 与 微 格式 比较 


微 数据 是 通过 一 组 自 有 的 (词汇 表 ) 属 性 来 语义 化 数据 ,数据 可 以 转换 成 JSON 格式 ,用 
来 进行 数据 交换 和 可 视 化 数据 的 参数 定义 。 微 格式 是 一 组 约定 好 的 数据 结构 ,在 HTML 
网 页 中 ,用 class 来 描述 数据 ,可 以 通过 把 hCard、hEvent 网 页 定义 的 微 格式 转换 成 通用 的 
vCard、vEvent, 来 进行 数据 分 享 和 交换 。 
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微 数据 和 微 格式 可 以 简单 地 互 换 ,把 定义 微 数 据 的 数据 类 型 itemtype 改 成 二 http:// 
microformats. org/profile/hcard, 将 class 改 成 itemprop 即 可 。 下 面 是 微 格 式 的 代码 。 





< section class = "vcard"> 

< img class = "photo" src = " images/qq. png" /> 
< strong class = "fn"> 周 化 钢 </strong> 

< span class = "org"> 南 宁 学 院 </span> 

< span class= "title"> 软 件 高 级 工程 师 </span> 
</section> 





将 上 面 的 微 格式 代码 转换 成 微 数 据 代码 ,如 下 。 





< img itemprop = "photo" src = "images/qq.png" /> 
< strong itemprop = "fn"> 周 化 钢 </strong> 

< span itemprop = "org"> 南 宁 学 院 </span> 

< span itemprop = "title"> 软 件 高 级 工程 师 </span> 
</section > 





< section id= "vcard" itemscope itemtype = "http://microformats. org/profile/hcard"> 








7.4 data-* 自 定义 数据 


在 HTML 5 中 增加 了 data-" 的 方式 来 自 定义 属性 ,就 是 


data- 前 织 加 上 自 定义 的 属性 名 ,相当 于 在 一 个 HTML 的 标 多 元 大生 
签 元 素 内 进行 数据 存放 。 使 用 data- * 相当 于 编程 语言 的 变 。 pat2/eh7/eustomdata. html 


量 定义 ,让 JavaScript 更 好 地 访问 自 定义 的 数据 。 例 子 7-4 
是 用 自 定义 数据 属性 描述 数据 的 代码 。 





<div id= "profile" data— age= "34" data— gender = " 男 " data— my— name = 
data- title= "高 级 工程 师 "> 
我 的 简单 信息 </div> 





" 周 化 钢 " 








7.4.1 用 dataset 对 象 访问 自 定义 数据 


dataset 是 HTML 5 引入 的 一 个 新 对 象 ,用 *. ”来 获取 属性 ,需要 去 掉 data- 前 级 ,前 级 后 
面 的 属性 名 如 果 有 连 字 符 需 要 转化 为 驼峰 命名 。 下 面 的 代码 分 别 是 JavaScript 和 jQuery 


简单 访问 data- * 属性 的 代码 。 





//IS 代码 

var profile = document. getElementById( 'profile'); 

alert(" 姓 名 :" + profile. dataset. myName + "年 龄 :" + profile. dataset. age); 
//jouery 代码 

$ ('#profile'). data( 'age'); // 读 年 龄 
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下 面 的 代码 是 通过 dataset 给 自 定义 数据 赋值 ,及 添加 一 个 新 的 自 定义 属性 data-org。 





//js 代码 
var profile= document. getElementById( 'profile'); 
profile. dataset. age = "46"; 





profile. dataset. org = "南宁 学 院 "; // 添 加 新 属性 org 
//jquery 代码 
$ ('#profile'). data( 'age', "46"); // 修 改 年 龄 








7.4.2 用 getAttribute() 和 setAttribute() 访 问 自 定 义 数 据 


getAttribute() 和 setAttribute() 可 以 访问 HTML 元 素 的 所 有 属性 ,包括 自 定义 属性 ， 
因为 是 访问 元 素 的 属性 , 自 定义 属性 当然 包括 data- 的 前 级 名 。 例 子 7-5 的 代码 如 下 。 





//IS 代码 

var profile = document. getElementById( 'profile'); 

profile. setAttribute("data — age", "46"); 

alert(" 姓 名 :" + profile. getAttribute("data— my— name") 
+ "年 龄 :" + profile. 











7.4.3 dataset 和 getAttribute() 的 区 别 





例子 7-5: 
part2/ch7/customdata- 
atr. html 


dataset 是 一 个 DOMStringMap 类 型 的 键 值 对 集合 ,getAttribute/setAttribute 可 以 访 
问 所 有 的 dataset 内 容 ,dataset 只 能 访问 data-* 的 内 容 , 所 以 只 是 attribute 的 一 个 子 集 。 如 
果 用 setAttribute() 创建 一 个 属性 不 是 HTML 默认 的 属性 , 它 会 在 新 属性 名 上 自动 加 
data-。 下 面 的 代码 会 在 id=profile 的 HTML 元 素 中 添加 属性 data-org 二 "XX 学 院 "。 





//IS 代码 
var profile = document.getElementById( 'profile'); 
profile. setAttribute("org", "XX 学 院 "); 











并 不 是 所 有 浏览 器 都 支持 dataset, 所 以 用 getAttribute/setAttribute 的 兼容 性 会 更 好 。 


7.4.4 data-" 自 定义 属性 与 CSS 


通过 querySelectorAll 函数 ,可 以 根据 自 定义 的 data- 属 性 来 选择 元 素 ,如 以 下 代码 


所 示 。 





// 选 定 所 有 包含 data- age 属性 的 元 素 

document .querySelectorAll ( '[data—age]'); 

// 选 定 所 有 包含 data- age 属性 值 为 34 的 元 素 
document .querySelectorAll ( '[data—age= "34"]'); 



































62 1 移动 Web 应 用 开发 教程 一 -HTML 5+JavaScript 框 架 全 栈 App 开 发 


通过 自 定义 属性 定义 CSS, 代 码 如 下 。 





< style type = "text/css"> 
[data - age] {background - color: red;} </style> 











7.4.5 data-* 自 定义 属性 的 应 用 范围 


data-" 主要 用 来 做 私有 的 数据 存储 ,并 存储 在 HTML 网 页 文件 中 ,但 是 ,搜索 引擎 是 不 
关心 这 些 自 定义 数据 的 。 这 些 私有 数据 包括 一 些 元 素 的 初始 化 值 ,游戏 的 参数 值 视频 播放 
中 断 的 进度 值 等 。 

由 于 自 定义 属性 是 由 内 部 JavaScript 控制 ,外 部 应 用 是 无 法 访问 这 些 属性 值 的 ,也 就 是 
说 这 些 数 据 与 语义 化 无 关 。 语 义 化 网 页 还 是 靠 语义 化 标签 、 微 数据 和 微 格式 来 实现 。 


练习 


1. 编写 一 个 关于 你 个 人 描述 的 网 页 ,并 加 入 微 数据 标识 。 

2. 修改 例子 7-1 的 代码 , 先 定 义 一 个 学 校 的 通信 地 址 ,用 itemid 标识 ,在 个 人 介绍 中 ， 
再 通过 itemref 引用 这 个 地 址 。 

3. 将 例子 7-1 的 微 数据 代码 复制 到 Live Microdata 中 ,查看 转换 成 JSON 的 效果 。 

4. 将 例子 7-3 的 微 格式 代码 用 谷歌 的 浏览 器 Chrome 打开 , 单 击 工具 栏 Microformats 
图 标 , 查 看 微 格式 的 抓 取 效果 。( 先 安装 Microformats 插件 。) 


8.1 CSS 3 介绍 


虽然 W3C 仍然 在 制定 CSS 3 规范 ,但 HTML 5 和 CSS 3 是 独立 的 两 个 标准 ,尽管 现代 
浏览 器 已 经 实现 了 相当 多 的 CSS 3 属性 ,CSS 3 也 存在 浏览 器 兼容 问题 。 如 果 CSS 3 不 被 
浏览 器 支持 ,不 会 报错 ,只 是 影响 网 页 外 观 。 

CSS3 技术 被 划分 为 以 下 几 个 最 重要 的 模块 。 

(1) 选择 器 ; 

(2) 框 模型 ; 

(3) 背景 和 边框 ; 

(4) 文本 效果 ; 

(5) 2D/3D 转换 ; 

(6) 动画 ; 

(7) 多 列 布局 ; 

(8) 用 户 界面 。 


8.2 新 CSS 3 的 属性 命名 


由 于 目前 的 CSS 3 规范 还 没有 统一 ,所 以 在 CSS 3 的 属性 命名 上 ,建议 在 一 些 新 属性 或 
CSS 3 函数 名 前 加 浏览 器 标识 前 组 。 

(1) -moz: Firefox 和 Mozilla。 

(2) -ms: IE。 

(3) -wap: WAP 和 Opera。 

(4) -0: Opera。 

(5) -webkit: Chrome 和 Safari。 
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8.3 CSS 3 的 指令 @ 及 函数 url() 


CSS 3 定义 属性 更 灵活 。 在 HTML 网 页 中 任何 与 样式 有 关 的 定义 ,都 可 以 通过 @ 指 
令 ,转换 成 在 CSS 文 件 中 的 定义 。 例 如 ,HTML 页 面 中 ,可 以 用 link 标签 引入 CSS 文件 ,而 
在 CSS 文 件 中 ,可 以 用 @import url(CSS 外 部 文件 ) 来 实现 同样 的 功能 。 

例如 ,在 HTML 的 head 标签 下 定义 引入 css/screen. css 文件 的 代码 如 下 。 





< link rel = "stylesheet" media = "screen" href = "css/screen. css" 





同样 ,可 以 在 CSS 文件 中 引入 css/screen. css 文件, 代码 如 下 。 





@import url("css/screen. css") screen; 











指令 @ 也 可 以 将 HTML 的 标签 属性 改 成 在 CSS 文件 中 定义 。 
例如 ,在 HTML 文件 中 定义 的 媒体 查询 属性 : 





< link rel = "stylesheet" media = "screen and (max — width:480px)" href = "smal1480. css" /> 











通过 @ 指 令 符号 ,可 以 在 CSS 文 件 中 实现 同样 的 定义 ,只 是 small480. css 文件 中 定义 
的 内 容 变 成 {选择 器 {属性 :属性 值 ;}。 代 码 如 下 。 





@media screen and (max- width: 480px) {选择 器 {属性 :属性 值 ;} 











在 上 述 例子 中 ,我 们 看 到 url("/css/screen. css") 这 种 以 函数 形式 的 值 出 现 ,CSS 3 引入 
了 更 多 的 函数 形式 来 定义 CSS 的 属性 值 ,如 下 代码 是 通过 函数 让 一 个 div 块 元 素 旋转 30” 
变换 。 





div {transform:rotate(30deg);} 











8.4 CSS 3 的 盒子 特效 


盒子 是 指 那些 符合 盒子 模型 的 HTML 标签 元 素 。 盒 子 会 有 一 些 特效 性 质 , 就 像 前 面 
提 到 的 CSS 3 的 模块 划分 .背景 和 边框 \ 文 本 效果 .2D/3D 转换 、 动 画 等 ,这 些 特效 涉及 透明 
度 . 圆 角 旋转 、 阴 影 等 。 盒 子 的 特效 早期 是 通过 JavaScript 编程 实现 的 ,例如 ,通过 jQuery 
库 实现 的 特效 ,现在 可 以 不 用 编程 ,通过 加 入 CSS 3 属性 直接 定义 特效 。CSS 3 加 入 了 函数 
表达 功能 ,也 给 CSS 增加 了 丰富 多 彩 的 特效 。 

例如 ,早期 CSS 定义 页 面 背景 颜色 代码 如 下 。 





body{background: # 22E355;} 
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CSS 3 通过 颜色 函数 rgb() ,就 可 以 用 十 进 制 数 定义 颜色 ,代码 如 下 。 





body{background:rgb(211,11,123);} 











盒子 的 特效 属性 命名 是 由 单词 和 *-" 连 字符 组 成 ,JavaScript 可 以 访问 这 些 属性 ,但 是 需 
要 将 CSS 的 属性 名 改 成 驼峰 命名 。 例 如 ,CSS 定义 文本 阴影 的 代码 如 下 。 





hl {text— shadow: 2px 3px 4px red;} 





JavaScript 实现 同样 效果 的 语法 (object 是 指 元 素 对 象 ) 的 代码 如 下 。 











object. style. textShadow = "2px 3px 4px red"; 





8.4.1 透明 度 

透明 度 就 是 对 HTML 元 素 的 可 见 程度 ,CSS 3 引入 opacity 属性 来 定义 透明 度 。 这 是 
一 个 全 局 CSS 属性 ,直接 对 元 素 定义 透明 度 。opacity 的 值 是 0~1,1 表示 不 透明 。 示 例 代 
码 如 下 。 





.tBox3{background:rgb(110,143,11); opacity:0.5;} 








把 透明 度 作为 参数 , 放 在 函数 中 使 用 。 例 如 ,函数 rgba() 可 以 给 颜色 定义 透明 度 , 函 数 
内 含 4 个 参数 , 红 , 绿 , 蓝 和 alpha 二 0 一 1,0 为 透明 ,1 为 不 透明 。 








. tBox1 {background:rgba(110, 143,11,0.5);} 








例子 8-1: 
part2/ch8/opacity. html 





例子 8-1 是 透明 度 演示 代码 。 


8.4.2 圆 角 

早期 的 HTML 盒子 都 是 直角 型 ,CSS 3 可 以 把 盒子 的 4 个 角 圆 化 ,分 别 用 4 个 值 表示 
圆 弧 的 半径 , 值 越 大 ,弧度 越 大 ,单位 可 以 是 px、em 和 百分比 。 

border-radius 属性 定义 4 个 角 的 弧度 ,4 个 值 表 示 4 个 角 ,代码 如 下 。 





.Tboxl{border - radius:30px 30px 30px 30px;} 











注意 ,如 果 取 值 数目 小 于 4, 代表 不 同 的 角 。 

(1) 4 个 值 表示 : 左上 ,右上 , 右 下 ,左下 角 次 序 。 

(2) 3 个 值 表示 : 第 一 个 值 表示 左上 ,第 二 个 值 表示 右上 和 左下 ,第 三 个 值 表示 右 下 。 
(3) 2 个 值 表示 : 第 一 个 值 表 示 左 上 和 右 下 .第 二 个 值 表示 右上 和 左下 。 

(4) 1 个 值 表示 : 4 个 角 取 值 一 样 。 
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可 以 单独 分 别 定义 每 个 角 的 弧度 : border-top-left-radius、border-bottom-right-radius、 
border-top-right-radius 和 border-bottom-left-radius。 角 度 由 两 个 值 来 决定 : 水 平和 垂直 弧 


度 。 如 果 只 定义 一 个 值 , 默 认 水 平 弧度 和 垂直 弧度 值 相等 。 


的 宽度 ,垂直 弧度 百分比 是 相对 于 盒子 的 高 度 。 代 码 如 下 。 


水 平 弧度 百分比 是 相对 于 盒子 





.rbox2{border - top— left — radius:30px 15px;} 








例子 8-2: 








打开 例子 8-2 查看 圆 角 的 效果 。 


8.4.3 阴影 


part2/ch8/radius/radius. html 


一 一 一 一 一 一 一 一 





CSS 3 定义 了 两 种 阴影 效果 : 盒子 (box-shadow) 和 文字 (textrshadow)。box-shadow 


阴影 属性 带 5 个 参数 ,有 些 参 数 可 以 忽略 ,代码 如 下 。 





.bshadowl {Box — shadow:6px 6px 2px gray;} 











参数 属性 见 表 8-1。 


表 8-1 阴影 的 属性 值 

















参数 说 明 
水 平 偏 移 = 
生 直 偏 移 水 平 垂直 的 偏 移 量 , 正 值 表 示 向 右 下 偏 移 ,否则 向 左下 偏 移 
模糊 值 阴影 的 模糊 程度 
扩展 值 阴影 的 范围 
颜色 阴影 的 颜色 ,可 以 用 rgba() 定 义 颜色 , 带 透 明度 
盒子 阴影 调整 方法 如 下 。 


(1) 伸展 范围 (spread) 调 整 ,单位 px, 在 模糊 度 和 颜色 之 间 。 
(2) 元 素 内 部 上 部 创建 阴影 ,在 颜色 参数 后 加 单词 inset。 





.bshadow2{box — shadow:6px 6px 2px 10px lime inset;} 





(3) 元 素 内 部 创建 阴影 ,水 平 、 垂 直 设 0px, 加 inset 参数 。 





.bshadow3{box - shadow:0px 0px 2px 20px pink inset;} 











文字 text-shadow 阴影 属性 带 4 个 参数 ,颜色 排列 次 序 可 以 在 最 前 或 最 后 ,水 平 偏 移 、 


垂直 偏 移 、 模 糊 度 必 须 在 一 起 。 代 码 如 下 。 








.tshadow{ font - size:35px; font - weight :bold; text - shadow: red 6px 2px 10px;} 








还 可 以 多 阴影 琶 加 ,代码 如 下 。 
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hl { color: red; text — shadow: 1px 2px 2px gray, 0 0 20px| 


blue, 0 0 6px darkblue;} 例子 8-3: 
part2/ch8/shadow/ 


shadow. html 











关于 阴影 演示 见 例子 8-3。 


8.4.4 ”背景 图 
早期 的 背景 图 是 在 HTML 页 面 中 加 入 img 标签 生成 的 ,CSS 3 可 以 直接 通过 url() 函数 调 
用 图 片 文件 作为 元 素 的 背景 ,或 者 制作 按钮 。 下 面 的 代码 是 给 bbox 类 选择 器 定义 背景 图 。 





.bbox{background — image:url( 'images/qq_logo. png') ;background - size:30px 30px; 
background — position:top left; background— repeat:repeat — x;} 











这 里 主要 有 4 个 属性 来 创建 背景 图 形 , 见 表 8-2。 
表 8-2 背景 图 的 属性 值 


属 性 值 
Background-image 通过 url() 加 载 图 形 ,可 以 加 载 多 个 图 形 
Background-position | 给 每 个 图 形 定义 位 置 ,在 top、left、right、bottom 值 中 取 两 个 值 定位 一 个 图 形 位 置 
Background-repeat no-repeat, 不 重复 ; repeat-x, 水 平 重复 ; repeat-y 垂直 重复 
高 宽 , 两 个 值 决 定 图 形 大 小 ,还 可 以 是 contain 和 cover,contain 值 表示 将 背景 图 
Background-size 扩展 到 内 容 区 域 里 面 ,但 不 能 超过 内 容 区 域 。cover 值 表示 背景 图 完全 覆盖 内 容 
区 域 

















多 图 片 组 合 的 背景 图 代码 如 下 。 





# backgd { 
background - image: url( images/ff. jpg), url(images/qq. png); 
background - position: left top, right bottom; 
background - repeat: no - repeat, repeat;} 





也 可 以 将 上 面 的 代码 缩写 成 下 面 的 代码 。 





井 backgd{Background:url( images/ff. jpg) left top no - repeat,url( images/qq. png) right bottom 
repeat;} 











还 有 两 个 比较 特殊 的 属性 是 background-origin 和 background-clip。 前 面 一 个 是 针对 
以 图 片 作 背景 图 ,后 面 是 针对 以 颜色 泻 染 作 背 景 图 。 根 据 HTML 的 盒子 模型 ,背景 图 可 以 
出 现在 盒子 模型 的 如 下 三 个 地 方 。 

(1) border-box 一 一 默认 值 ,背景 出 现 于 盒子 的 边界 地 方 。 【EREEEEEE 

(2) padding-box 一 一 背景 出 现 于 盒子 的 边 距 的 地 方 。 例子 8-4: 

(3) content-box 一 一 背景 在 盒子 内 容 区 域 出 现 。 Part2/ch8/background/ 

打开 例子 8-4 代码 查看 背景 图 效果 。 et 
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8.4.5 渐变 


背景 渐变 (Gradiant) ,就 是 对 元 素 的 背景 颜色 ,通过 多 种 颜色 混合 产生 五 彩 斑 调 、 光 怪 
陆 离 的 效果 。 早 期 是 通过 图 片 产 生 的 渐变 ,需要 占用 带宽 ,CSS 3 的 渐变 在 浏览 器 中 完成 ， 
效率 高 ,即使 改变 浏览 器 窗口 也 不 影响 效果 。 

这 里 提供 两 种 方法 产生 渐变 : 线性 渐变 (linear-gradiant) , 沿 着 直线 混合 颜色 变化 ; 辐 
射 渐变 (radial-gradiant) , 沿 着 圆心 到 圆周 的 渐变 。 

渐变 的 定义 是 通过 渐变 函数 计算 background 属性 值 完成 ,声明 渐变 函数 有 以 下 几 种 方法 。 

(1) linear-gradiant() ,线性 渐变 。 

(2) radial-gradiant() ,辐射 渐变 。 

(3) repeating-linear-gradiant() ,重复 线性 渐变 。 

(4) repeating-radial-gradiant() ,重复 辐射 渐变 。 

由 于 早期 浏览 器 渐变 标准 没有 统一 ,渐变 函数 要 加 浏览 器 前 组 。 定 义 渐变 需要 两 种 以 
上 的 颜色 组 合 。 线 性 渐变 函数 具体 参数 见 表 8-3 。 

表 8-3 ”线性 渐变 函数 参数 

















linear-gradiant 参数 参数 说 明 
浙 变 起 点 位 置 例子 8-5: 
1 top ,left ,right\bottom, 任 选 一 或 两 个 值 ee 
颜色 组 合 可 以 选 多 个 值 ,用 去 号 分 隔 , 至 少 要 移 两 种 PY 
渐变 点 (百分比 ) 颜色 值 后 可 以 跟 渐变 起 点 值 一 


线性 渐变 见 例子 8-5, 下 面 的 代码 是 三 种 颜色 组 合 的 线性 渐变 。 





#bgradiant1 { 

background: red; /* 如 果 不 支持 渐变 * / 

background: — moz — linear - gradiant(top left, red 0%, yellow 15%, pink 20%); 

background: — webkit- linear— gradient(top left, red 0%, yellow 15%, pink 20%); 
background: —o— linear— gradient(top left, red 0%, yellow 15%, pink 20%); 

background: linear - gradient(top left, red 0%, yellow 15%, pink 20% ); / * 最 新 版 本 浏览 器 * / 
: 











使 用 角度 产生 线性 渐变 而 不 是 用 上 下 左右 值 ,角度 是 指 水 平 线 和 渐变 线 之 间 的 度数 , 代 
码 如 下 。 





提 bgradiant2 {background: red; / * 如 果 不 支持 渐变 * / 
background: — webkit- linear - gradient( - 60deg, red, yellow); 
background: —o— linear- gradient( - 60deg, red, yellow); 
background: — moz— linear— gradient( - 60deg, red, yellow); 
background: linear - gradient( - 60deg，red，yellow); / * 最 新 版 本 浏览 器 */ 











使 用 透明 度 产生 线性 渐变 ,只 要 将 渐变 颜色 用 函数 rgba() 替 换 ,其 最 后 一 个 参数 就 是 
透明 度 。 
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辐射 渐变 起 始点 是 从 中 心 开始 ,除了 要 求 至 少 两 种 颜色 组 合 外 ,还 有 两 个 特殊 的 参数 : 
形状 和 渐变 范围 。 其 参数 说 明 见 表 8-4。 
表 8-4 辐射 的 三 个 参数 
































radial-gradiant 参数 参数 说 明 

形状 默认 值 是 eclipse( 椭 圆 ), 另 外 一 个 值 是 circle( 圆 ) 

渐变 范 有 4 个 值 : closest-side、farthest-side、closest-corner ,farthest-corner( 上 默认 值 ) 
颜色 组 合 可 以 选 多 个 值 , 用 逗号 分 隔 ,至 少 要 选 两 种 

渐变 空间 (百分比 ) 每 个 颜色 渐变 空间 值 ,%% 表 示 , 如 果 不 定义 颜色 是 均匀 分 布 





下 面 是 辐射 渐变 的 代码 。 





#bgradiant3 { 

background: — webkit — radial — gradient(50% 55%, closest— corner, red, yellow, black); 
background: —o— radial - gradient(50% 55%, closest— corner, red, yellow, black); 
background: 一 moz 一 radial - gradient(50% 55%, closest— corner, red, yellow, black); 
background: radial - gradient(closest - corner at 50% 55%, red, yellow, black); /* 最 新 版 本 











浏览 器 * / 
观看 效果 见 例子 8-6 。 a 
例子 8-6: 
十 part2/ch8/gradiant/ 
8.4.6 过 渡 radial. html 


CSS 3 可 以 控制 样式 切换 时 产生 的 过 渡 效 果 。 例 如 ,从 
-种 背景 颜色 变换 到 另 一 个 背景 颜色 ,在 一 个 时 间 段 完成 变化 过 程 ,使 这 个 变化 更 显得 优 
雅 ,而 不 会 太 突然 。 设 置 过 渡 要 求 如 下 。 

(1) 在 CSS 3 的 过 渡 标 准 还 没有 确定 前 ,过 渡 属 性 要 加 浏览 器 前 级 。 

(2) Transition 属性 值 可 以 是 任何 要 做 过 渡 效 果 的 属性 加 过 渡 时 间 秒 数 。 

以 下 代码 是 用 一 个 光标 移 人 元 素 对 象 的 伪 类 :hover, 来 显示 一 个 按钮 的 过 渡 效果 。 





. sbutton{color:green; font - weight:bold;padding 10px，border:solid 1px black; 
background: lightgreen; cursor:pointer; 
— webkit — transition:background 0.5s, color 0.5s 
— moz — transition:background 0.5s, color 0.5s; 
transition:background 0.5s, color 0.5s; 
} 
. sbutton:hover {color:black;background: yellow;} 











代码 中 定义 两 个 CSS 样式 ,一 个 是 正常 情况 下 的 样式 ,在 正常 样式 下 定义 过 渡 效果 , 另 
一 个 是 带 伪 类 :hover, 也 就 是 光标 移入 的 样式 。 过 渡 属 性 可 
以 有 多 个 值 ,用 逗号 分 隔 , 例 如 ,background 背景 颜色 过 渡 ， 例子 8-7: 
color 文字 颜色 过 渡 ,all 所 有 属性 过 渡 。 Part2/ch§/transition/ 
例子 8-7 是 对 按钮 的 两 个 属性 一 背景 和 文字 颜色 进行 aasition heml 
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8.4.7 变换 
变换 就 是 把 盒子 变形 .移动 。 
在 CSS 3 变换 标准 确定 以 前 ,变换 属性 要 带 浏览 器 前 级 。 
变换 属性 值 由 变换 函数 生成 ,变换 函数 见 表 8-5。 
表 8-5 三 种 变换 类 型 














变换 函数 说 明 
rotate(x) 旋转 x 角度 ,单位 : deg 例子 8-8: 
scale (x)，scalex (x)，| 缩放 x 倍 ,scalex(x) 水 平 扩展 x 像素 ,单位 part2/ch8/transform/ 
scaley(x) px; scale(y) 垂 直 扩展 像素, 单位 px transform. html 
skew(x) 斜 切 x 角度 ,单位 deg 








打开 例子 8-8 观察 变换 效果 。 


8.5 CSS 3 的 复杂 选择 器 

第 3 章 学 习 了 CSS 基本 选择 器 外 ,如 id 选择 器 .class 选择 器 等 ,本 节 将 介绍 较为 复杂 
的 选择 器 。 

8.5.1 元 素 属性 选择 器 


元 素 属 性 选择 器 ,是 以 HTML 标签 元 素 的 属性 来 定义 样式 。 例 如 下 面 的 代码 中 , 几 是 
input 标签 元 素 中 定义 有 name 属性 的 都 为 黄色 背景 。 








input[name]{background: yellow;} 








也 可 以 把 一 个 标签 元 素 下 的 多 个 属性 组 合 定义 样 式 , 代 ae 





人 码 如 下 。 例子 8-9: 
part2/ch8/selectors/ 
input[name][type]{background:yellow;} property/property. html 








通过 例子 8-9 查看 效果 。 


8.5.2 元 素 属性 值 选择 器 


元 素 属性 及 其 值 可 作为 选择 器 ,以 下 代码 是 指 所 定义 type 二 "text" 属 性 的 input 标签 的 
字符 样式 。 





input[type= "text"]{font - family:arial, sans — serif} 
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属性 值 作为 选择 器 ,还 可 以 应 用 正则 表达 式 匹 配 , 见 表 8-6。 
表 8-6 属性 值 正则 表达 式 匹 配 





























正则 表达 式 例 手 说 明 
[attribute 一 一 value] [title~ =flower] 选择 属性 title 包含 单词 "flower" 的 所 有 元 素 
[attribute| =value] [lang| =en] 选择 lang 属性 值 以 "en" 开 头 的 所 有 元 素 
[attribute * 一 value] a[href * 一 "qq"] 选择 href 属性 包含 "qq" 的 a 标签 
[attribute “= value] a[href “="http"] 选择 href 属性 开始 有 "http" 字 符 串 的 a 标签 
[attribute$ =value] a[href$ 一 "jpg"] 选择 href 属性 末尾 有 "jpg" 字 符 串 的 a 标签 
具体 效果 看 例子 8-10。 eo———— 
例子 8-10: 
8.5.3 伪 类 选择 器 part2/ch8/selectors/ 


property/ propertyl. html 

伪 类 (Pseudo-Classes) 是 根据 HTML 的 结构 特征 ,针对 
这 些 特征 进行 分 类 ,这 些 特征 可 能 是 元 素 的 状态 或 元 素 的 位 
置 次 序 。 由 CSS 系统 事先 定义 ,无须 用 户 定义 默认 的 类 。 伪 类 前 加 “: ”标识 。 

超 链接 < a > 元 素 默 认 的 伪 类 如 下 。 

(1) a:link 用 在 未 访问 的 链接 上 。 

(2) a:visited 用 在 已 经 访问 过 的 链接 上 。 

(3) a:active 用 于 获得 焦点 (比如 ,被 单 击 ) 的 链接 上 。 i 

(4) a:hover 用 于 鼠标 光标 置 于 其 上 的 链接 。 例子 8-11: 

例子 8-11 中 ,实现 鼠标 、 光 标 经 过 一 段 文字 时 出 现 的 。 part2/ch8/selectors/Pseudo- 
active 和 hover 状态 。 classes/text. html 

其 他 新 增 的 伪 类 选择 器 见 表 8-7。 

表 8-7 CSS 3 增加 的 伪 类 选择 器 























伪 类 描 述 伪 类 描 述 
:root 根 元 素 :last-child 最 后 一 个 子 元 素 
:nth-child(n) 父 元 素 下 的 第 n 个 子 元 素 :first-of-type 第 一 个 同类 型 
:nth-last-child(n) | 倒数 第 n 个 子 元 素 :last-of-type 最 后 一 个 同类 型 
:nth-of-type(n) 与 其 类 型 相同 的 第 n 个 兄弟 :only-child 唯一 一 个 子 元 素 
:nth-last-of-type(n)| 倒数 第 n 个 同类 :only-of-type 唯一 一 个 同类 
:first-child 第 一 个 子 元 素 :empty 没有 子 元 素 或 文本 值 的 元 素 

















以 下 代码 是 选择 器 匹配 所 有 < p > 元 素 中 的 第 一 个 <i> 元 素 , 见 例子 8-12。 


TI | 
p> i:first- child {font ~ weight:bold;} 仙子 8 12: 








part2/ch8/selectors/ Pseudo- 
classes/first-child. html 





<p> some <i>A</i>, more <i>B</i>.</p> 
<p> some <i>C</i>, more <i>D</i>.</p> 
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下 面 的 代码 是 选择 器 匹配 所 有 作为 元 素 的 第 一 个 子 元 素 的 < p > 元 素 中 的 所 有 < i > 元 
素 , 见 例子 8-13。 











p:first ~ child i { color:blue; } ; 例子 8-13: 


part2/ch8/selectors/Pseudo- 
classes/first-child1. html 








<p> some <i>A</i>, more<i>B</i>.</p> 
<p> some <i>C</i>, more<i>D</i>.</p> 











8.5.4 ” 伪 元 素 选择 器 

伪 元 素 (Pseudo-elements) 选 择 器 是 结构 化 的 元 素 标识 ,例如 ,标识 文本 元 素 。 为 了 区 
别 伪 类 选择 器 ,用 “: : ”标识 伪 元 素 选择 器 。 

伪 元 素 是 在 元 素 某 一 位 置 添加 或 修改 内 容 , 一 般 会 与 CSS 属性 content 结合 使 用 , 见 





又 























表 8-8。 
表 8-8 通过 伪 元 素 添加 内 容 
表 达 式 例 子 说 明 
: :first-letter p: :first-letter 选择 每 个 < p> 元 素 的 首 字母 
: :first-line p: :first-line 选择 每 个 < p > 元 素 的 首 行 
+ :first-child pi :first-child 选择 属于 父 元 素 的 第 一 个 子 元 素 的 每 个 <p > 元 素 
::before p: :before 在 每 个 < p> 元 素 的 内 容 之 前 插入 内 容 
:safter Pp: :after 在 每 个 < p > 元 素 的 内 容 之 后 插入 内 容 
+ :first-letter pl :first-letter 选择 每 个 < p > 元 素 的 首 字母 
: :first-line p: :first-line 选择 每 个 < p > 元 素 的 首 行 








下 面 的 代码 是 通过 伪 元 素 将 第 一 个 < p > 标签 的 第 一 行文 本 内 容 (:fisrt-line) 的 第 一 个 
字符 (: :first-letter) 放 大 300%。 





article p:first — child:first — line:first — letter{font — size:300% ;color: #996677;} 








通过 伪 元 素 ::after、: :before 及 CSS 的 content 属性 添加 图 片 ,代码 如 下 。 





= 
例子 8-14: 
part2/ch8/selectors/Pseudo- 
elements/first-letter. html 


hl : :before { content:url(qq logo. png); } 








hl : :after { content:url(qq logo. png); } 











具体 演示 见 例子 8-14。 


8.5.5 伪 类 与 伪 元 素 的 区 别 
CSS 伪 类 用 于 向 某 些 选择 器 添加 特殊 的 效果 ,CSS 伪 元 素 用 于 将 现 有 内 容 定位 或 添加 
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新 内 容 到 某 些 选择 器 来 达到 特殊 的 效果 。 

从 规范 的 角度 看 , 伪 元 素 一 个 页 面 只 使 用 一 次 ,而 伪 类 可 以 多 次 使 用 。 伪 元 素 产生 的 新 
对 象 ,在 DOM 中 看 不 到 ,但 是 可 以 操作 ; 伪 类 是 DOM 中 一 个 元 素 的 不 同 状态 。 

下 面 的 代码 用 伪 元 素 : :first-letter 来 进行 分 析 比 较 。 








p::first— letter {color: red} <p>I an Joe.</p> 














以 上 代码 可 以 通过 现 有 的 HTML 的 < span > 和 属性 class 来 模仿 伪 元 素 ,并 形成 下 面 
的 代码 。 





.first— letter {color: red} <p>< span class= 'first — letter> I</span> am Joe.</p> 

















可 以 看 到 , 伪 类 等 同 于 添加 一 个 实际 的 类 来 达到 ,而 伪 元 。 aa 

素 的 效果 则 需要 通过 添加 一 个 实际 的 元 素 及 类 才能 达到 ,这 例子 8-15: 

也 是 为 什么 称 其 为 伪 元 素 的 原因 。 part2/ch8/selectors/Pseudo- 
通过 伪 类 与 伪 元 素 结合 使 用 ,可 达到 更 容易 理解 的 效果 。 classelements/elass 


element. html 


见 例子 8-15, 伪 类 :hover 和 伪 元 素 : :before 结合 使 用 ,代码 二 二 二 二 二 二 二 一 























如 下 。 
<p>IanJoe.</p> a:hover: :before { content: "\5B"; left: 一 20px; } 
a:hover: :after { content: "\5D"; right: 一 20px; } 

练习 


1. 在 例子 8-14 的 first-letter. html 中 ,用 of-type 伪 类 修改 替换 first-child 来 达到 同样 
效果 。 也 可 以 不 要 使 用 id、class 选择 器 来 改变 DD 字符 的 颜色 。 

2. 在 HTML 页 面 定义 两 个 图 片 ,两 个 图 片 相互 全 加 , 释 加 部 分 透明 。 

3. 修改 例子 8-2 ,制作 一 个 子弹 头 的 形状 国 EED9 . 

4. 制作 一 个 带 阴影 的 文字 ,光标 移入 阴影 消失 ,移出 阴影 恢复 。 

5. 定义 一 个 背景 图 ,比较 background-size 的 cover 和 contain 与 background-origin 的 
border-box、padding-box 及 content-box 的 区 别 。 

6. 制作 一 个 带 渐变 的 按钮 。 

7. 修改 例子 8-5 的 代码 在 光标 切入 时 ,给 按钮 加 阴影 ,给 阴影 产生 过 渡 。 

8. 如 何 让 变换 产生 过 渡 的 效果 ? 请 编写 代码 。 

9. 属性 值 选择 器 可 以 应 用 正则 表达 式 , 通 过 实验 看 看 [attribute| 二 value] 和 [attrubute ^ 一 
value] 的 区 别 。 

10. CSS 3 非常 强大 , 它 引 入 了 函数 的 方法 。 而 比 CSS 3 更 进一步 的 改进 还 有 很 多 CSS 
框架 ,例如 LESS 和 SASS, 这 些 框架 在 CSS 3 的 语法 基础 上 ,添加 了 变量 和 更 多 的 函数 风 
格 ,让 CSS 更 容易 维护 ,代码 风格 更 优雅 。 但 是 ,目前 很 多 浏览 器 还 不 能 直接 解析 LESS 和 
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SASS 的 语法 ,所 以 ,这 些 框架 都 自 带 编译 器 ,编译 成 普通 的 CSS 语法 文件 格式 。 也 有 很 多 
代码 编辑 器 通过 插件 支持 LESS 和 SASS 语法 ,并 在 保存 时 ,编译 成 CSS 语法 格式 。 要 体验 
LESS 的 效果 ,可 在 brackets 代码 编辑 器 中 安装 LESS 编译 器 插件 : https://github. com/ 
jdiehl/brackets-less-autocompile, 到 LESS 官网 http://lesscss. org/ ,学 习 基本 语法 ,感受 用 
计算 机 高 级 语言 编写 CSS 代码 的 乐趣 。 


站 


HTML 5 表单 


1 增强 特性 


9.1.1 占 位 符 
占 位 符 的 功能 是 在 表单 输入 栏 中 显示 提示 信息 , 当 光 标 移入 时 ,提示 信息 消失 。 代 码 


如 下 。 





< input type = "text" id = "name" placeholder = "Fill in your full name"> 








调整 占 位 符 的 颜色 是 由 伪 元 素 : :placeholder 实现 的 , 见 例子 9-1, 代 码 如 下 。 





| 
input: : — webkit - placeholder {color: aliceblue; background — 例子 9-1: 
color: #ccc;} part2/ch9/placeholder/ 








placeholder-js-css. html 


也 可 以 用 JavaScript 实现 占 位 符 功能 ,代码 如 下 。 








< input type= "text" value = "Fill in your full name" 

maxlength= "140" size="50" 

onfocus = "if (this. value == 'Fill in your full name') 
{ this.value = '';}" 

onblur = "if (this.value == '')" 

{this. value = 'Fill in your full name ';"> 








及 用 JS 动 态 加 入 class 二 ph 和 no-ph 实现 同样 的 颜色 改变 功能 , 见 例子 9-2, 代 码 


如 下 。 
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例子 9-2; 
part2/ch9/placeholder/ 
placeholder-css. html 


.ph {color: #999;} 
.no 一 ph {color: #000;} 











9.1.2 自动 聚焦 
自动 聚焦 是 当 页 面 加 载 完成 时 ,光标 自动 跳 转 到 表单 的 某 一 元 素 ,这 些 标 签 元 素 有 


<button > < input >,< select >、< keygen >、< textarea > 等 。autofocus 属性 是 布尔 值 。 例 


子 9-3 是 自动 聚焦 到 password 输入 域 ,代码 如 下 。 








例子 9-3: 
< input type = 'password' part2/ch9/autofocus/ 
id= 'password'autofocus ></input > autofocus. html 











同样 ,可 以 用 JavaScript 实现 自动 聚焦 。 在 上 面 的 代码 中 加 入 以 下 JS 代码 ,用 
Modemizr 库 对 象 检 查 浏览 器 如 果 不 支 持 autofocus, 再 用 JS 代码 实现 。 代 码 如 下 。 





< script > if (!Modernizr. input. autofocus) 
{document. getElementById( 'password'). focus();}</script > 











9.1.3 自动 完成 数据 列表 


一 个 输入 字段 加 入 autocomplete 属性 和 < datalist > 元 ER 
素 ,可 完成 输入 的 选择 项 输入 ,类似 于 HTML 4 的 < select >。 例子 9-4: 
如 果 < datalist > 没有 列 出 数据 ,用 户 还 可 以 手工 输入 。 Part2/ch9/autocomplete/ 
例子 9-4 代码 中 ,注意 < input > 的 list 属性 和 < datalist > “soeomplete hem 
的 id 属性 值 要 一 致 。 代 码 如 下 。 





< input type= "text" id= "animal" list = "animals" autocomplete> 
<datalist id= "animals"> 
< option value = "bees"> 

< option value= "birds"> 
< option value= "cats"> 

< option value = "cows"> 

< option value = "dogs"> 

< option value= "fish"> 

< option value = "horses"> 
< option value = "snakes"> 
</datalist> 











也 可 以 用 jQuery 实现 自动 完成 数据 列表 的 功能 , 见 例子 9-5, 代 码 如 下 。 
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< script >$ (document). ready(function(){ 

if (!Modernizr. input.autocomplete) { 

var data = ["bees", "birds", "cats", "cows", 
"dogs", "fish", "horses", "snakes" ]; 

$ ("#animals").autocomplete( {source: data}); }}); 
</script> 


例子 9-5; 
part2/ch9/autocomplete/ 
autocomp-jg. html 











9.2 新 的 < input > 的 type 类 型 
HTML 5 增加 了 13 种 输入 类 型 ,如 果 浏 览 器 不 支持 某 种 类 型 ,会 自动 回 退 为 type 王 


"text"。 


9.2.1 数字 
新 增加 三 种 数据 类 型 . 数字 (number) ,范围 (range) .电话 (tel) ,如 下 。 


(1) <input type 一 "number"> 

(2) <input type 一 "range"> 

(3) <input type= "tel"> 

可 以 给 数字 类 型 加 min (最 小 值 )、max (最 大 值 )、step( 增 量 )、value( 当 前 值 ) 属 性 。 
range 类 型 会 出 现 滚 动 条 , 见 例子 9-6, 代 码 如 下 。 








例子 9-6: 
请 打分 (0 一 10):< br/> part2/ch9/inputtype/ 
< input type= "range" min= 0 max =10 value=5> number. html 











数字 (number) 类 型 的 好 处 是 不 用 作 字 符 ,数字 转换 ,输入 值 直 接 可 以 用 于 数字 计算 而 
不 用 parseInt() 的 JavaScript 函数 转换 。 移 动 设备 检测 到 数字 输入 类 型 时 ,会 自动 转换 数 
字 键 盘 。 


9.2.2 日 期 时 间 


在 HTML 4.01 版 以 前 ,日 期 的 输入 是 纯粹 的 文本 输入 ,输入 后 还 需要 编写 JavaScript 
代码 来 检查 日 期 格式 及 合法 性 。 后 来 ,jQuery 解决 了 日 期 的 输入 GUI( 图 形 化 用 户 界 面 ) 及 
格式 控制 。 而 HTML 5 的 日 期 功能 ,完全 不 用 JavaScript 编程 来 完成 日 期 时 间 的 GUI 输 
入 。HTML 5 新 增 6 种 日 期 时 间 类 型 , 见 表 9-1。 在 相应 的 输入 栏 会 自动 出 现 日 历 控件 、 时 
间 控 件 及 格式 占 位 符 提示 。 

表 9-1 6 种 日 期 的 类 型 及 格式 














E33 型 格式 说 明 类 型 格式 说 明 
datetime YYYY-MMDDTHH:MMZ 十 00:00 month yyyy-mm 
datetime local| YYYY-MM-DDTHH: MM week yyyy- ww 
date yyyy-mm-dd time HH:MM 
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如 果 浏 览 器 不 支持 日 期 类 型 ,还 可 以 用 jQuery 实现 的 日 期 输入 的 回 退 方案 , 见 例子 9-7， 


代码 如 下 。 





if (!Modernizr. inputtypes. date) { $ (function() { 
$("#d" ).datepicker({ dateFormat: 'yy— mm— dd' }); 
1D); 
1 











9.2.3 ”E-mail .URL 颜色 和 搜索 





例子 9-7: 
part2/ch9/inputtype/ date-jq. 
html. 


HTML 5 提供 更 多 的 输入 类 型 来 满足 不 同 的 输入 格式 要 求 ,例如 ,E-mail( 电 子 邮 件 )、 


URL、 颜 色 和 搜索 , 见 表 9-2。 浏 览 器 会 对 E-mail 和 URL 格 
式 自动 验证 ,浏览 器 会 通过 颜色 调 色 板 来 选择 输入 颜色 ,搜索 
栏 虽然 与 text 文本 输入 没有 太 大 差别 ,但 是 当 搜索 框 中 输入 
文本 时 , 框 的 右边 会 出 现 清除 图 标 * xX”, 用 来 删除 输入 的 文 
字 。 还 可 以 通过 一 些 CSS 属性 设置 来 改变 搜索 栏 的 外 观 以 
区 分 普通 文本 输入 栏 , 见 例子 9-8。 


例子 9-8: 
part2/ch9/inputtype/email- 
url-search-color. html 


表 9-2 E-mail、URL、 颜 色 、 搜 索 的 输入 类 型 

















类 型 说 明 
email 在 移动 设备 上 ,输入 软 键盘 会 出 现 @ 和 . 的 符号 键 
url 在 移动 设备 上 ,输入 软 键盘 会 出 现 . com 和 /的 符号 键 
color 输入 界面 会 弹出 拾 色 器 ,获取 6 位 十 六 进 制 数 颜色 代码 
search 会 出 现 搜索 栏 外 观 


WebKit 引擎 的 浏览 器 例如 Chrome 提供 更 多 的 外 观 属性 ,例如 ,加 results 属性 来 显示 
最 近 搜索 关键 词 列表 ,appearance 属性 关闭 搜索 栏 的 默认 样式 。 


9.3 ”表单 新 元 素 


HTML 5 表单 中 除 最 常用 的 < input > 元 素 外 ,还 增加 


< keygen > 和 < output >。 


9.3.1 生成 密 钥 


了 一 些 新 的 表单 元 素 ,例如 


HTML 5 增加 了 < keygen > 生成 密 钥 对 , 当 提 交 表单 时 ,会 生成 私 钥 和 公 钥 两 个 键 , 私 


钥 保 存 于 客户 端 , 公 钥 在 表单 提交 时 ,被 发 送 到 服务 器 。 公 
可 用 于 服务 器 验证 用 户 的 客户 端 证 书 。 

以 下 是 例子 9-9 在 提交 表单 后 ,浏览 器 URL 框 显 示 的 公 
钥 编码 。 








例子 9-9: 
Part2/ch9/newElement/ 
keygen. html 
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file:///C:/Users/Joe/Desktop/ % E8 % AF % BESE7SABSS8B/% El SATSBBS ES 8NA% ABNEBS ES 

%BC%80%E5S%8F%91/source% 20code/part2/ch9/newElement/keygen. html?pubkey = MIIBSzCBt 
TCBnzANBgkqhk iG9wOBAQEFAAOBjQAwgYkCgYEA3bRWOjx6v3FGHWO3 % OD % OAEuzTaY910jq7f1TUDKKSISep 
nlCqhCIS8nKXJSP5WKS5r1MEZnhAnABEiPSaIqDhm % 0D % OABG9c4FUcLdYNbeyrvqemAbAy102PLwKcHAzksPy 
mEzw % 2B66nfDRbt29hx1RXFRE % 2Bj % 0D % OAVZmjgcuEavaCwXGSjRkg7PCZfrUCAwEAARYRcmFuZG9tLWNO 
YXJhY3R1cnMwDQYJ % 0D % OAKoZIhvcNAQEEBOADgYEAqOsX5ClepDBjhiRTzPhJYd11YsQmMTV % 2BdvGkmv07 
ZtTo % 0Dg% OArj20zUoKwij5Rd8LHyOzCMZnX5GxjRXARJ3CqxJ5xElc % 2FuR % 2Bcrkoag7 % 2F2SyIVeQb % 
OD % OAuUROLARjBx4fogoplImx27CyBDpId2Qi416GNOujKjfI19w6sY9ZZXDJghS % 2BsdrA % 3D&create — ce 
rtificate= %E5%88%9B% ES%BBS BAS ES%AFS86%E5%8C% 99 








9.3.2 表单 输出 


<output > 表单 输出 的 目的 是 配合 JavaScript, 用 来 在 RE 
<output > 标签 输出 结果 或 内 容 。 例 子 9-10 中 ,通过 < form > ”例子 9-10: 
的 事件 属性 oninput 来 把 输入 的 两 个 数字 相 加 ,结果 输出 到 part2/eh9/newElement/ 


本 .html 
<output > 标签 。 EP 


9.4 表单 验证 


表单 验证 可 以 发 生 在 客户 端 或 者 服务 器 端 。HTML 5 支持 的 浏览 器 增加 了 一 部 分 客 
户 端 的 验证 功能 , 当 单 击 “ 提 交 ” 按 钮 时 会 自动 在 验证 不 通过 的 输入 栏 弹出 提示 ,提示 内 容 必 
须 加 入 title 属性 完成 。 浏 览 器 可 以 在 光标 离开 输入 栏 时 即时 验证 刚刚 输入 的 值 , 如 果 结 果 
非法 ,CSS 默认 的 非法 为 红色 框 显示 。 


9.4.1 表单 验证 属性 

与 验证 有 关 的 表单 属性 有 : 

(1) 在 < form > 中 加 入 关闭 验证 属性 novalidate, 可 以 禁用 浏览 器 客户 端 验证 。 
(2) required 属性 ,在 < input > 中 加 入 必 填 字段 。 

(3) pattern 属性 加 入 正则 表达 式 验 证 。 例子 9-11: 


例子 9-11 是 对 文本 输入 加 入 正则 表达 式 的 代码 ,代码 Part2/eh9/eheck/check. html 
如 下 。 








< input type= "text" pattern="[A—2Z]{3}- [0 -9]{3}"> 











9.4.2 ”表单 验证 样式 

CSS 3 还 增加 了 与 验证 有 关 的 伪 类 来 定制 验证 的 样式 ,直接 让 用 户 自 定义 验证 的 外 观 
变化 。 

(1) :required, 必 填 ; :optional, 选 填 。 

(2) :valid, 合 法 ; :invalid, 非 法 。 
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(3) :in-range, 范 围 内 ; :out-of-range, 范 围 外 。 
(4) :focus, 光 标 聚 焦 ; :blur, 光 标 离开 。 





例子 9-12 是 用 伪 类 定义 的 验证 样式 ,代码 如 下 。 例子 9-12: 
part2/ch9/check/ 
Input :required: invalid{background — color: lightyellow;} checkwithCSS. htm1 











9.4.3” 自 定义 表单 验证 非法 信息 提示 


表单 验证 有 自己 默认 的 弹出 错误 提示 信息 ,但 是 要 通过 
加 入 title 属性 来 简单 修改 表单 验证 错误 提示 信息 ,如 果 用 户 例子 9-13: 

需要 完全 定制 自己 的 验证 错误 信息 ,可 以 通过 JavaScript 对 。 Part2/ehg/check/ 
验证 对 象 提供 一 个 内 置 的 错误 信息 函数 setCustomValidity “om bem 

O 〇 用 来 实现 验证 错误 信息 的 效果 , 见 例子 9-13。 





9.5 HTML 标签 元 素 内 容 可 编辑 属性 

在 HTML 4.01 版 本 中 ,<p>、<hl > 等 元 素 的 内 容 , 用 户 都 是 不 可 随意 修改 的 。 唯 一 
可 以 让 用 户 修改 内 容 的 方式 是 通过 表单 的 input 标签 元 素 和 textarea 元 素 。HTML 5 引入 
了 全 局 contenteditable 属性 ,是 布尔 值 .让 用 户 直 接 修改 元 素 的 内 容 , 代 码 如 下 。 





<p contenteditable > 请 随时 编辑 ,修改 这 里 的 文本 .</p> 











练习 


1. 把 例子 9-6 的 代码 放 到 Web 服务 器 端 运 行 ,通过 手机 浏览 器 打开 例子 9-6, 看 看 手机 
系统 能 不 能 自动 切换 到 数字 键盘 ? 

2. 通过 例子 9-7, 加 入 更 多 的 jQuery 输入 时 间 (time)、 周 日 (week) 控 件 代码 ,与 
HTML 5 日 期 \ 时 间 控 件 进行 比较 。 

3. 如 果 表 单 输入 的 数据 很 多 .可 以 把 数据 分 组 ,HTML 5 增加 了 分 组 元 素 < fieldset >， 
配合 < legend > 标签 注 明 数据 组 的 名 称 。 请 用 这 两 个 元 素 编写 一 个 登录 页 面 。 

4. 修改 例子 9-10 的 代码 ,制作 一 个 简单 的 加 减 乘除 计算 器 。 

5. 编写 代码 ,用 JavaScript 抓 取 可 编辑 区 域内 容 。 
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Web 字 体 与 排版 


10.1 Web 字体 


计算 机 操作 系统 及 一 些 文字 处 理工 具 和 专业 图 形 工具 都 有 自己 的 字体 库 。 字 体 作 为 一 
种 通用 的 计算 机 软件 资源 ,就 像 图 像 一 样 ,也 有 自己 的 格式 标准 。 特 别 是 由 于 Web 应 用 系 
统 的 跨 平 台 特 征 , 人 们 对 Web 字体 的 需求 日 益 强烈 。 

Web 字体 是 在 网 页 设计 中 用 到 的 字体 ,浏览 器 本 身 也 提供 一 些 默认 的 字体 (如 图 10-1 
所 示 ) ,虽然 在 互联 网 上 有 很 多 字体 库 , 但 是 如 果 想 用 自己 设计 好 的 字体 ,或 安装 第 三 方 字体 
到 网 页 中 ,在 CSS 3 以 前 是 不 可 能 的 。 





Fonts & Colors 


Default font: Times New Roman ~ Size 16 -~ 








图 10-1 Firefox 浏览 器 的 默认 字体 设置 


图 片 .视频 .音频 资源 .字体 库 也 是 拥有 知识 产权 的 资源 之 一 , 像 软 件 一 样 是 具有 最 终 用 
户 许 可 协议 (End-User License Agreement,EULA) ,有 授权 许可 证 形式 发 布 在 网 上 ,根据 授 
权 的 不 同 ,有 的 字体 是 免费 使 用 ,有 些 授权 商业 使 用 或 允许 个 人 使 用 。 


10.2 ”Web 字体 格式 


Web 字体 有 自己 的 格式 标准 ,不 同 的 浏览 器 会 支持 不 同 的 字体 标准 。 常 用 的 字体 格式 
有 以 下 几 种 。 

(1) TrueType Fonts(TTF) 字 体 : 所 有 浏览 器 及 IE 9 以 上 支持 。 

(2) Embeded OpenType(EOT) 字 体 : IE 专用 字体 。 

(3) Web Open Font Format(WOFF) 字 体 : 专 为 Web 定义 的 字体 标准 , 含 元 数据 、 描 
述 许 可 证 和 字体 信息 。 
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(4) Scalable Vector Graphics(SVG) 字 体 : 矢量 图 字体 。 

(5) 图 标 字体 : 是 一 种 特殊 的 图 标 ,而 非 字母 ,但 是 使 用 字体 格式 。 

字体 格式 也 可 以 通过 工具 进行 转换 ,例如 ,www. fontsquirrel. com/fontface/generator 
是 一 个 在 线 免费 转换 字体 格式 的 工具 。 


10.3 Web 字体 的 导入 


导入 字体 源 ,可 以 使 用 下 载 到 本 地 的 字体 库 , 或 远程 连接 到 Web 字体 库 。 以 下 是 一 些 
英文 字体 库 。 

(1) www. fontsquirrel. com,www. fontspace. com, 提 供 免 费 字 体 下 载 。 

(2) www. Google. com/Fonts, 是 流行 的 免费 字体 库 服 务 。 

中 文字 体 源 有 : 

(1) http://Fonts. com, 通 过 搜索 Chinese 关键 字 获 得 中 文字 体 , 包 括 繁体 字 。 

(2) http://ifontcloud. com, 通 过 搜索 Chinese 关键 字 , 可 以 发 现 ,中 文 的 Web 字体 就 
有 100 种 以 上 。 

(3) http://www. zitiguanjia. com/yun/ ,中 国人 开发 的 ,针对 于 App 应 用 的 字体 库 , 当 
然 包 括 Web 字体 。 

(4) http://www. youziku. com/ ,不 但 提供 在 线 字库 ,也 可 以 提供 制定 字库 服务 ,但 是 
只 提供 自己 的 加 载 字 体 的 JavaScript API。 

(5) http://www. iconfont. cn/ ,图 标 矢 量 字 体 库 ,及 Web 字体 。 


10.4 ”Web 字体 的 使 用 

CSS 3 是 通过 @font-face 定义 和 导入 新 的 字体 。 一 旦 创建 ,命名 了 新 字体 规则 ,就 可 以 
在 CSS 文档 中 使 用 这 个 字体 。 在 CSS 3 的 字体 定义 中 ,至 少 要 下 载 引 用 三 种 以 上 的 字体 格 
式 。 如 下 代码 是 引入 并 定义 一 个 新 字体 的 CSS 代码 。 





@font — face { 
font - family: 'pinghei'; 
src: url('../font/pinghei. eot'); 
src: 
url('../font/pinghei. eot? # font — spider') format( 'embedded — opentype'), 
url('../font/pinghei. woff') format( 'woff'), 
url('../font/pinghei. ttf') format( 'truetype'), 
url('../font/pinghei. svg') format('svg'); 
font - weight: normal; 
font — style: normal; 
} 




















首先 通过 font-family 给 新 字体 起 一 个 名 字 'pinghei' ,以 便 后 面 的 元 素 引 用 。 然 后 引入 
字体 源 ,可 以 是 本 地 下 载 ( 使 用 相对 路 径 ) 的 字体 或 互联 网 上 的 在 线 字体 。 例 如 : src: ur 
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("1942-webfont. eot')。 第 一 个 src 指向 正 专用 的 eot 字体 
文件 ,是 为 了 兼容 正 ,第 二 个 src 是 兼容 其 他 浏览 器 。 例子 10-1: 

下 面 的 代码 是 在 网 页 中 使 用 新 字体 ,打开 例子 10-1 查看 Part2/ch10/fontface. html 
效果 。 








hl { font— family: 'pinghei';} 











10.5 使 用 Web 字体 问题 


大 多 数 Web 字体 需要 购买 许可 ,所 以 在 下 载 使 用 前 要 看 版 权 声 明 ,避免 产生 知识 产权 纠纷 

Web 字体 库 都 是 有 千 或 兆 单位 字 节 , 下 载 需要 时 间 ,会 影响 网 页 的 显示 速度 ,特别 是 中 
文字 体 库 ,通常 是 以 兆 字 节 为 单位 ,平均 每 套 中 文字 体 库 有 5MB 大 小 ,字体 从 服务 器 加 载 到 
浏览 器 端 需要 较 长 时 间 , 所 以 ,中 文字 体 需 要 在 服务 器 端 重新 完成 压缩 与 构建 ,其 原理 是 根据 
内 容 按 需 截 取 , 将 字体 库 压 缩 到 KB 的 单位 来 提高 推送 速度 。 下 面 是 两 个 中 文字 体 压缩 工具 。 

(1) 字 蛛 的 http://font-spider. org/。 字 蛛 是 一 个 中 文字 体 压 缩 器 ,让 网 页 自由 引入 中 
文字 体 成 为 可 能 。 

(2) 百度 的 http://efe. baidu. com/blog/chinese-font-build/ 。 中 文 Web 字体 可 自动 化 
构建 。 

如 果 网 页 要 使 用 少量 的 字体 ,可 以 用 图 像 处 理工 具 来 设计 好 字体 的 外 观 ,再 生成 图 像 ， 
以 图 像 的 方式 来 加 载 到 网 页 中 ,例如 Logo 字体 。 

Web 字体 还 可 以 作出 图 标 风格 ,在 网 页 中 引用 。 如 图 10-2 所 示 字 体 的 龙 形 图 案 就 是 对 
应 于 26 个 大 小 写 英文 字母 等 。 


> 分 向 $ 洛 和 69Gwe 从 泵 
OD 

Wak FTONERS 1 23456789 
0&.,71@ ()#$% +-=:; 


图 10-2 图标 风格 的 Web 字体 


10.6 排版 中 的 字体 属性 
字体 的 属性 是 以 font- 前 级 命名 的 ,主要 有 以 下 几 种 。 
(1) font-family: 引用 字体 族 , 可 以 多 个 ,用 逗号 分 隔 。 
(2) font-weight: 字体 粗细 可 以 是 bold( 加 粗 )、normal( 正 常 ) 或 是 数值 表示 。 
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(3) font-style: 字体 外 观 是 italic( 斜 体 ) .del( 删 除 ) .normal( 正 常 ) 等 。 

(4) font-size/line-height: 字体 大 小 / 行 高 ,可 以 用 %、px、em 单位 表示 。 

(5) font-varian: small-caps 文本 为 小 型 的 大 写字 母 。 

(6) font-stretch: 横向 拉 伸 变形 .CSS 3 的 新 属性 。 

字体 属性 可 以 单独 定义 ,也 可 以 用 font: 在 一 行 定义 所 有 的 属性 ,达到 简化 字体 定义 目 
的 。 如 下 代码 表示 p 标签 的 字体 是 斜体 、 大 写 、 粗 体 、12px 字体 大 小 、1. 5em 行 高 的 arial 和 
verdana 字体 。 





pffont: italic small - caps bold 12px/1. 5em arial, verdana; } 











等 同 于 单独 定义 如 下 。 
。 font-style: italic; 


。 font-variant: small-caps; 


font-weight: bold; 


font-size: 12px; 


line-height: 1. 5em; 
。 font-family:arial, verdana 。 


属性 顺序 : font-style | font-variant | font-weight | font-size | line-height | fontfamily。 


10.7 排版 中 的 行 高 


line-height 属性 表示 行 高 , 按 W3C 定义 是 元 素 中 基线 之 间 的 最 小 距离 ,其 值 可 以 是 
normal( 正 常 )、 字 体 大 小 的 %、 像 素 值 (px) 和 数值 。 行 间距 % 数 计算 : 行 间 中 (px) 二 font- 
size(px) 百分数 。 行 间距 数值 计算 :字体 间距 (px) ==font- 
size(px) XX 数值 。 例子 10-2: 

如 图 10-3 所 示 是 用 Firefox 浏览 器 打开 例子 10-2, 通 过 Part2/ch10/lineheight. html 
开发 者 工具 , 才 看 到 的 16px 字体 默认 的 行 高 是 21. 5333。 其 
实 是 盒子 模型 的 元 素 内 容 的 空间 高 度 (height) 。 








区 是 ine-height=0.5 行 高 。 福 当 于 16 ( px ) x0.50=8px。 Tt | 
这 是 line-height=12px 行 高 。 


这 是 line-height=500% 行 高 ， 相 当 于 16 ( px ) x50%=80px。 


图 10-3 开发 者 工具 查看 默认 行 高 


10.8 排版 中 的 特殊 符号 


HTML 页 面 在 输入 一 些 与 HTML 语法 有 冲突 的 字符 时 ,采用 “&& 十 字符 缩写 ”的 方式 ， 
例如 ,输入 “<” 可 以 写成 “&lt;”。 注 意 ,每 一 个 输入 符号 后 面 要 加 “;”。 其 实 , HTML 可 以 
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输入 字符 集 的 任何 图 形 化 的 符号 。 下 面 是 字符 集 里 面 的 部 分 图 形 化 的 字符 例子 。 





全 9650 25B2 Pb 9658 25BR W 9660 25BC 4 9668 25C4 口 10084 2764 
9992 2708 玄 9733 2605 口 10022 2726 口 9728 2600 使 9670 25C6 
@ 9672 25C8 [®] 9635 25A3 口 9744 2610 口 9745 2611 口 9746 2612 口 10003 2713 






































上 面 列表 中 ,每 一 个 符号 后 面 有 两 组 编码 ,分 别 是 十 进 制 和 十 六 进 制 编码 。 十 进 制 编码 
用 于 HTML 文档 中 ,需要 在 编号 前 面 加 上 “&# ”符号 ,比如 说 “如 ”符号 对 应 的 十 进 制 编 码 
是 “9668” ,那么 在 HTML 文档 中 需要 写成 “&#9668;”; 第 二 个 十 六 进 制 编码 用 于 CSS 文 
档 中 ,需要 在 编号 前 面 加 上 反 斜 杠 “\” 进 行 转 义 ,那么 “4 ”符号 对 应 的 十 六 进 制 编码 是 
“25C4”, 在 CSS 文档 中 需要 写成 “\25C4”; 十 六 进 制 编码 也 
可 以 用 于 JavaScript 文档 中 ,需要 在 编码 前 面 加 上 “\u” 来 进 ”例子 10-3: 

行 转 义 , 比如 说 “如 ”符号 ,在 JavaScript 文档 中 ,就 要 写成 Part2/ch10/font-special. html 
“\u25C4”。 | 
打开 例子 10-3 查看 特殊 字符 的 效果 。 

















10.9 排版 分 栏 


和 其 他 排版 工具 一 样 , 可 以 把 一 个 内 容 分 成 几 列 来 显示 ,也 叫 作 分 栏 。 在 CSS 文件 中 
可 以 对 块 标签 元 素 定 义 分 栏 , 定 义 分 栏 主要 有 两 个 属性 : column-count 和 column-gap ,格式 
其 下 
(1) p{column-count:3;} ,表示 将 p 标签 的 内 容 分 成 三 ”例子 10-4: 
个 列 。 part2/ch10/column. html 
(2) p{column-gap: 20px;) ,表示 分 栏 间 距 是 20px。 
例子 10-4 中 把 第 一 个 p 标签 内 容 分 成 三 列 。 





练习 
1. 在 网 上 寻找 一 些 特殊 字体 ,例如 1942-report-fontfacekit, 制 作 一 个 通缉 罪犯 的 海报 。 
2. 使 用 特殊 字符 ,例如 “ 口 ”, 模 拟 一 个 表单 复 选 框 的 功能 。 
3. 在 例子 10-4 中 ,如 何 让 分 栏 间隔 变 成 线条 ? 
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11.1 画图 功能 


画图 是 很 多 计算 机 高 级 语言 的 功能 之 一 ,例如 ,Java.C+r+、PHP 都 有 画图 功能 ,要 给 网 
页 画图 , 早期 是 通过 CSS 的 盒子 边界 border 属性 来 生成 线条 。 现 在 , HTML 5 给 
JavaScript 增加 了 画图 功能 接口 。 之 前 的 浏览 器 要 演示 动画 ,动态 画图 需要 用 Flash 制作 ， 
并 在 浏览 器 中 安装 Flash 播放 器 插件 。 画 图 功能 的 引入 ,可 以 让 HTML 调用 JavaScript 夯 
图 API, 直 接 在 浏览 器 中 作画 。 

随 着 画图 规范 的 发 布 ,到 2015 年 ,许多 浏览 器 厂家 ,例如 ,Firefox、Chrome 和 Safari 都 
在 新 版 本 中 开始 禁用 Flash 播放 器 插件 。 基 于 HTML5 的 在 线 画 图 、 编 辑 工具 的 功能 也 非 
常 强大 ,几乎 可 以 成 为 Photoshop 等 专业 绘图 工具 的 替代 品 , 下 面 是 一 些 在 线 绘图 工具 。 

(1) http://mugtug. com/sketchpad, 模 仿 Photoshop 的 工具 栏 画笔 .配色 工具 .历史 
记录 ,几乎 可 以 替代 Photoshop 的 绘画 功能 。 

(2) http://zwibbler. com/ ,提供 类 似 Photoshop 的 工具 面板 ,从 工具 栏 上 拖 出 想 要 的 
图 形 形 状 ,然后 在 画布 上 修改 、 创 造 。 

(3) https://www. aviary. com/web ,在 线 照片 编辑 器 。 


11.2 < canvas > 画布 


<canvas > 是 HTML 5 引入 的 新 元 素 , 可 以 让 JavaScript 画图 API 在 这 个 元 素 里 面 画 
图 ,实现 直接 在 浏览 器 中 作画 。 

画图 步骤 如 下 。 

(1) 定义 < canvas > 画布 。 必 须 定义 画布 的 宽 和 高 ,如 下 。 





< canvas id = "drawing" width= "500" heigth= "300"></canvas > 
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(2) 用 CSS 修改 画布 外 观 ( 不 要 改变 width ,height)。 这 里 定义 画布 的 边线 和 背景 颜 
色 , 如 下 。 





canvas {border: 1px dashed black; background: yellow;} 





(3) 接着 ,用 JavaScript API 画图 .首先 通过 id 获取 < canvas > 元 素 对 象 。 





var canvas = document. getElementById( "drawing" ); 





(4) 通过 canvas 对 象 ,进一步 获取 二 维 画 图 工具 对 象 context。 





var context = canvas. getContext("2d"); 











(5) context 对 象 封 装 了 不 同 的 画图 函数 ,注意 ,画布 坐标 是 以 左上 和 角 为 起 点 (0,0) 。 


11.3 画 线 

获取 context 二 维 画 图 工具 对 象 后 ,主要 有 三 个 画 线 函 数 : moveTo(Cx,y) 移 动 到 画 线 的 
起 点 坐标 (x,y) ,lineTo(x,y) 从 起 点 画 线 到 (x,y) 的 终点 ,stroke() 执 行 画 线 , 见 例子 11-1， 
代码 如 下 。 








context. moveTo(9,9); 例子 11-1: 


contenxt. lineTo(255, 55); part2/ch11//line. html 
context. stroke( ); 











11.3.1 画 线 外 观 

可 以 通过 调用 函数 或 context 对 象 的 属性 方式 修改 CSS 值 ,而 不 是 直接 定义 CSS, 来 给 
线条 定义 颜色 .线头 、 接 点 外 观 及 粗细 样式 。 

(1) 粗细 : 通过 lineWidth 属性 定义 线条 粗细 为 10px, 代 码 如 下 。 





context. lineWidth = 10; 











(2) 颜色 : 可 以 调用 CSS 的 颜色 函数 rgb() 或 rgba(), 及 直接 用 颜色 名 称 , 如 "red"、 
"green"、"blue"、"yellow" 或 十 六 进 制 颜色 值 ,如 "#E0E1F2" 定 义 线条 颜色 。 注 意 ,这 里 是 
以 字符 串 的 形式 来 引用 CSS 颜色 值 ,所 以 要 用 引号 ,代码 如 下 。 





context. strokeStyle = "rgb(200,12,15)"; 











(3) 线头 (round、square、butt): 定义 线条 两 端的 形状 ,可 以 是 round( 圆 )、square( 方 ) 
和 butt( 平 直 ) 的 边缘 ,默认 为 butt 值 ,代码 如 下 。 
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context. lineCap = "round" 








(4) 线 接点 (round、bevel、miter) ,定义 线条 头 连接 处 的 形状 ,可 以 是 round( 圆 ) .bevel 
( 斜 角 ) .miter( 尖 角 ) ,默认 值 为 miter, 代 码 如 下 。 





例子 11-2: 
context. lineJoin= "miter"; part2/ch11/linejoin. html 














线条 外 观 例 子 见 例子 11-2。 


11.3.2 ”图形 形状 路 径 与 填充 

可 以 通过 线条 画 出 更 复杂 的 图 形 , 例 如 ,三 角形 、 多 边 形 等 ,但 是 ,需要 定义 图 形 形 状 路 
径 及 填充 颜色 。 

一 个 独立 的 图 形 ,需要 用 beginPath() 和 closePath() 来 区 分 同时 在 一 个 画布 上 的 其 他 图 
形 。 这 样 调用 fal() 填 充 颜 色 的 时 候 ,会 把 路 径 的 开始 点 和 结束 点 用 线条 自动 相连 形成 封闭 的 
图 形 , 这 样 在 给 某 一 个 图 形 进行 填充 时 ,不 会 填充 到 其 他 部 分 图 形 。 这 两 个 函数 的 作用 如 下 。 

(1) beginPath() ,定义 图 形 路 径 开 始 。 

(2) closePath() ,定义 图 形 路 径 闭合 。 

有 了 一 个 闭合 的 图 形 路 径 ,我 们 可 以 用 fill() 来 给 一 个 独立 的 形状 图 形 填充 颜色 。 具 体 
步骤 如 下 。 

(1) fillStyle, 定 义 填充 颜色 的 属性 ,和 strokeStyle 属性 一 样 ,可 以 是 CSS 颜色 的 任何 值 。 

(2) fill() ,执行 直线 闭合 路 径 填充 。 

下 面 是 画 一 个 三 角形 的 例子 : 最 后 一 个 lineTo(250,50) ”甸子 11-3: 
可 以 省 略 , 因 为 closePath() 关 闭 图 形 路 径 时 ,会 自动 画 一 条 Part2/ch11//triangle. html 
线 回 到 起 点 ,形成 闭合 , 见 例子 11-3 ,代码 如 下 。 








context. beginPath( ) ; 
context. moveTo( 250, 50); 
context. lineTo( 50, 250); 
context. lineTo( 450, 250); 
\\context. lineTo(250, 50); 
context. closePath( ) ; 
context. stroke( ); 





接着 定义 填充 颜色 ,代码 如 下 。 





context. fillStyle = "blue"; 





执行 填充 ,完成 一 个 蓝 色 的 实心 三 角形 .代码 如 下 。 








context. fill(); 








我 们 可 以 不 断 地 调整 lineTo (x,y) 里 面 的 x,y 坐标 参数 ,来 画 出 复杂 的 多 边 形 图 形 轮廓 。 


11.4 画 抵 形 
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HTML 5 专门 为 画 矩 形 定义 了 函数 , 见 表 11-1。 


表 11-1 画 矩 形 用 到 的 函数 




















函 数 说 明 
rect(x,y, w,h) 以 x,y 坐标 为 起 点 , 画 宽 高 为 w,h 的 矩形 
fillRect(x,y,w,h) 以 填充 方式 画 和 矩形 
strokeRect(x,y,w,h) 直接 执行 画 和 矩形 轮廓 
clearRect(x,y,w,h) 从 x,y 坐标 清空 宽 高 为 w,h 的 矩形 





根据 上 面 的 函数 ,可 以 用 填充 法 和 轮廓 法 画 出 不 同 的 矩形 。 





(1) 填充 法 画 和 矩形 有 两 种 方法 ,分 别 是 rect() 十 fill() 和 例子 -4: 


illRect() 。 分 别 见 例子 11-4 中 的 rect. html 和 rects3. html 
代码 如 下 。 


part2/ch1l1l/rect. html 和 
rect3. html 





context. fillStyle = "rgb(100,12,14)"; context. fillStyle= "rgb(100,12,14)"; 


context. rect(30, 30,159, 159); 
context. fill(); 


context. fillRect(30, 30,159,159); 

















(2) 轮廓 法 画 和 矩形 的 两 种 方法 ,分 别 是 strokeRect() 和 rect() 十 stroke()。 见 例子 11-5 


中 的 rectl. html 和 rect2. html ,为 轮廓 方式 画 和 矩形 ,代码 如 下 。 





context. lineWidth = 3; 


context. strokeStyle = rgb(120, 
context. strokeRect(30, 30,159, 


例子 11-5: 
111,176); part2/ch1l1/rectl. html 和 
159) rect2. html 














context. lineWidth = 3; 


context. strokeStyle = rgb(120, 


context. rect(30, 30,159,159); 
context. stroke( ); 
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11.5 图 形 的 清除 


清除 图 形 有 两 种 方式 : 清除 整个 画布 和 清除 一 个 矩形 区 域 ,相当 于 橡皮 擦 。 具 体 说 明 


如 下 。 


(1) 清除 画布 : 没有 专用 的 清除 函数 ,但 是 可 以 通过 重新 定义 画布 宽度 和 高 度 来 达到 





清除 目的 ,如 果 不 想 改 变 原来 画布 的 尺寸 ,只 想 消 除 画 布 的 图 形 , 可 以 如 下 定义 。 








canvas. width = canvas. width; 
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参见 例子 11-4 中 的 part2/ch11/rect. html, 双 击 画 布 可 以 清除 所 有 图 形 。 
(2) 清除 一 个 矩形 区 域 : 可 以 直接 调用 和 矩形 函数 clearRect() 来 清除 一 个 区 域 中 的 


图 形 。 


11.6 画 弧 线 与 圆 


首先 ,了 解 一 下 圆 的 数学 知识 , 圆 和 弧 有 很 多 参数 来 决定 它 的 外 观 , 例 如 ,圆心 .半径 等 。 


具体 参数 如 下 。 
(1) 圆心 坐标 x,y。 
(2) 圆 的 半径 r。 
(3) 圆周 率 PI 二 3. 14。 
(4) 圆 的 周 长 =2XrxPI。 
(5) 圆 的 面积 =r^2XPI。 
(6) 圆 角 度 degree( 完 整 的 圆 是 360”) 。 





(7) 圆 弧度 angle 二 (PI/180) X degree( 完 整 的 圆 弧 度 一 (3. 14/180) X360=3. 14X2= 


6. 28 弧度 ) 。 

如 图 11-1 所 示 是 计算 一 个 圆 的 弧 长 度 , 从 坐标 的 水 平 
轴 右 边 为 0 起 点 , 顺 时 针 绕 四 分 之 一 的 圆 弧 长 度 是 0. 5 Xx 
PI=1. 57, 以 此 类 推 。 

HTML 5 提供 了 面 圆 弧 函 数 : arc (x, y, radius， 
startAngle, endAngle，closewise), 其 中 ,(x,y) 为 圆心 坐 
标 ,radius 为 半径 ,startAngle 和 endAngle 为 圆 弧 的 开始 
和 结束 值 , 画 一 个 完整 的 圆 startAngle 二 0,endAngle 王 
6. 28。closewise 一 true 为 顺 时 针 画 ,否则 为 逆 时 针 画 。 见 
例子 11-6 ,代码 如 下 。 





var startPoint = (Math.PI/180) * 0; 

var endPoint = (Math.PI/180) * 360; 

context. beginPath( ); 

context. arc(200,200,100, startPoint, endPoint, true); 
context. fill(); 











画 弧 ,是 通过 调节 起 点 和 终点 弧度 值 及 closewise 顺 时 针 、 


部 分 。 见 例子 11-7 ,代码 如 下 。 





var startPoint = (Math.PI/180) * 185; 

var endPoint = (Math.PI/180) * 289; 

context. beginPath( ); 

context. arc(200, 200, 100, startPoint, endPoint, true); 
context. stroke( ); 














1.5xPI 


1XPI 音 0 


0.5XPI 


图 11-1 一 个 圆 的 弧 长 计算 











| 
例子 11-6: 
part2/ch11/circle. html 


逆 时 针 来 得 到 圆 不 同 的 两 个 





例子 11-7: 
part2/ch11/cure. html 
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11.7 画 曲线 


画 不 规则 的 曲线 主要 由 三 个 函数 完成 : arcTo(), 介 于 两 个 切线 之 间 创 建 弧 ; 
BezilerCurveTo() ,三 次 贝 塞 尔 曲 线 , 由 三 个 点 来 控制 一 个 曲线 的 弯 度 ,前 两 个 点 是 控制 点 ， 
第 三 个 点 是 曲线 的 结束 点 ,曲线 的 开始 点 是 当前 路 径 中 最 后 cn 
一 个 点 ; quadraticCurveTo() ,二 次 贝 塞 尔 曲线 ,由 两 个 点 来 ”例子 11-8: 
控制 曲线 的 弯 度 一 一 控制 点 和 曲线 的 结束 点 。 具 体 说 明 见 。 Part2/chl1/morecure. html 
表 11-2, 打 开 例 子 11-8 查看 不 规则 曲线 的 效果 。 

表 11-2 三 个 画 曲 线 的 函数 
函 数 说 明 
arcTo(xl,yl,x2,y2,r) 从 xl,yl 到 x2,y2 坐标 创建 两 切线 之 间 的 半径 为 + 的 曲线 
三 次 贝 塞 尔 曲线 ,起 点 ,终点 (x,y) 连 接 两 个 控制 点 (cxl， 


cyl1), (cx2. cy2) 
quadraticCurveTo(cx,cy, x,y) 二 次 贝 塞 尔 曲 线 , 起 点 ,终点 (x,y) 连 接 一 个 控制 点 (cx,cy) 











BezilerCurveTo(cxl ,cyl ,cx2,cy2,x,y) 








11.8 变换、 渐变 、 透 明度 与 阴影 


CSS 3 已 经 可 以 给 盒子 模型 加 上 变换 \ 渐 变 、 透 明度 与 阴影 等 特效 ,canvas 画图 同样 提 
供 了 相同 的 图 形 特效 接口 。 


11.8.1 渐变 


CSS 3 有 线性 渐变 和 辐射 渐变 ,对 应 的 函数 有 linear-gradiant() 和 radial-gradiant()。 渐 变 

可 用 于 填充 矩形 、 圆 形 .线条 文本 等 内 容 。Canvas 画图 提供 的 渐变 接口 函数 见 表 11-3。 
表 11-3 ”渐变 函数 
函 数 说 明 

createLinearGradient(xl,yl,x2,y2) 创建 线性 对 象 ,渐变 从 坐标 xl,y2 到 x2,y2 的 渐变 
创建 辐射 渐变 对 象 ,从 半径 为 rl 的 圆心 xl ,yl 渐变 到 半 
径 2 的 圆心 x2,y2 
在 渐变 对 象 中 加 入 渐变 颜色 ,range 渐变 范围 0 一 1,css- 
color 为 CSS 3 样式 颜色 








createRadialGradient(xl,yl,rl,x2,y2,r2) 





addColorStop(range, css-color) 








下 面 是 创建 一 个 线性 渐变 矩形 的 代码 , 见 例子 11-9。 首 先 创建 一 个 渐变 对 象 linGrad, 给 
linGrad 对 象 加 入 红 和 橘 黄色 ,将 linGrad 对 象 赋值 给 fillStyle 属性 ,再 以 填充 方式 画 和 矩形 。 








var linGrad = context.createLinearGradient(0,0, 500,500); 
linGrad. addColorStop(0, "red"); 

linGrad. addColorStop(1, "orange"); 

context. fillStyle = linGrad; 

context. fillRect(10,10, 490,490); 


例子 11-9: 
part2/ch11/lin-gradient. html 
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下 面 是 辐射 渐变 的 代码 , 见 例子 11-10。 





var radGrad = context. createRadialGradient (100, 150, 0, 
100,150, 300); 

radGrad. addColorStop(0.9, "rgb(105,138,72)"); 

radGrad. addColorStop(0, "rgba(171,235,108,1)"); 

radGrad. addColorStop(1, "rgba(105,138,72,0)"); 

context. fillStyle = radGrad; 


例子 11-10: 











part2/ch11/rad-gradient. html 














11.8.2 变换 
CSS 3 也 有 变换 函数 来 实现 傅 子 的 变形 移动 ,HTML 5 也 为 画图 提供 了 类 似 的 变换 函 
数 , 见 表 11-4。 
表 11-4 变换 函数 
函数 说 明 

translate(x,y) 重新 修改 画布 的 原点 (默认 为 0,0) 到 x,y 坐标 

scale(w,h) 以 宽 高 倍数 缩放 

rotate(x) 旋转 x degree, 为 弧度 值 

save() restore() 保存 恢复 坐标 系 的 路 径 状态 和 属性 





在 例子 11-11 的 translate. html 中 ,我 们 通过 调整 (x,y) 坐 标 来 画 两 个 同样 的 矩形 ,及 例 
子 11-11 的 translatel. html 中 ,通过 translate() 函 数 来 改变 坐标 系 , 画 两 个 同样 矩形 的 效果 


看 起 来 都 是 一 样 的 。 但 是 , 当 我 们 给 第 二 个 矩形 加 入 scale() 
和 rotate() 后 ,效果 就 有 差距 了 。 应 用 translate() 函 数 的 第 ”例子 11-11: 





二 个 矩形 基本 上 按照 我 们 的 要 求 在 坐标 (50,50) 位 置 上 夯 一 。 Part2/chll/translate. html 和 


个 放大 二 倍 的 旋转 30" 角 的 矩形 ,而 translate. html 例子 就 没 
有 达到 预期 效果 。 


11.8.3 ”透明度 


translatel. html 


Canvas 画图 中 有 三 个 属性 与 透明 度 有 关 : fillStyle 填充 了 


样式 ,strokeStyle 轮廓 样式 和 globalAlpha 全 局 透明 度 属性 。 例子 11-12: 


前 面 两 个 属性 要 通过 rgba() 函数 来 定义 样式 颜色 ,同时 , 定 。 Part2/ehl1/transparent. html 


义 透 明度 值 ( 见 表 11-5)。 见 例子 11-12。 
表 11-5 透明 度 属性 

















与 透明 度 有 关 的 画图 属性 说 明 
fillStyle，strokeStyle 用 rgba() 设 置 的 颜色 值 , 及 透明 度 
globalAlpha 设 全 局 透明 度 

11.8.4 阴影 








Canvas 画图 中 共有 4 个 属性 来 设置 一 个 图 形 的 阴影 效果 ,例如 ,通过 使 











shadowOffsetX 

















和 shadowOffsetY 属性 来 调节 阴影 在 坐标 轴 X 或 Y 上 扩展 多 少 个 像素 。 具 体 见 表 11-6。 
表 11-6 阴影 的 属性 























属 性 说 明 属 性 说 明 
shadowOffsetX 阴影 在 X 轴 的 扩展 shadowBlur 阴影 模糊 度 
shadowOffsetY 阴影 在 站 轴 的 扩展 shadowColor 阴影 颜色 





例子 11-13 的 代码 如 下 ,shadowOffsetY 二 -20 表示 阴影 的 扩展 方向 是 往 Y 轴 的 顶部 延 
伸 20px。 








context. shadowOffsetX = 20; 
context. shadowOffsetY =— 20; 
context. shadowBlur = 5; 
context. shadowColor = "gray"; 


例子 11-13: 
part2/ch11/shadow. html 











11.9 ”画布 插入 文字 、 图 片 及 图 案 


11.9.1 画布 插入 文字 


在 画布 上 搬入 文字 有 两 种 方式 : 填充 插入 fillTextO 〇 和 
轮廓 文字 插入 strokeText()。 使 用 font 属性 来 定义 像 CSS 例子 11-14: 
值 的 字体 和 字号 ,还 可 以 使 用 fillStyle 属性 加 颜色 渐变、 阴 Part2/ehl1 text-can. html 
影 来 泻 染 文本 。 常 用 的 函数 和 属性 见 表 11-7. 代 码 演示 见 例 

















子 11-14。 
表 11-7 画布 插入 文字 的 函数 和 属性 
函数 或 属性 说 明 

fillText(text, x,y) 在 x,y 坐标 上 填充 写 入 text 文本 

strokeText(text, x,y) 在 x,y 坐标 画布 上 绘制 text 文本 轮廓 

font 类 似 CSS 定义 字体 属性 

textAlign 类 似 CSS 的 text-align 文字 对 齐 

textBaseline 文本 基线 , 值 有 top、middle、hanging .alphabetic ,ideopgraphic、bottom 








11.9.2 画布 插入 图 片 


HTML 的 < img > 标签 元 素 可 以 把 图 片 显 示 在 浏览 器 里 面 , 但 是 不 能 显示 在 画布 区 域 
中 ,HTML 5 的 Canvas 接口 提供 一 个 drawImage() 函 数 来 完成 这 个 任务 。 

通过 表 11-8 的 图 像 属性 和 函数 来 完成 图 片 插入 到 画布 中 。 方 法 如 下 。 

(1) 创建 一 个 image 图 片 对 象 。 

(2) 给 图 片 对 象 加 载 一 个 图 片 源 。 例子 11-15: 

(3) 再 通过 drawImage() 夯 到 画布 上 。 Part2/ch11/img. html 

见 例子 11-15。 
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表 11-8 画布 插入 图 片 的 基本 的 接口 属性 和 函数 

















函数 或 属性 说 明 
img 一 new Image() 创建 img 图 像 对 象 
img. src= 例如 ,引入 “images/qq_logo. png” 图 像 源 
drawImage(img, x,y) 在 x,y 坐标 上 写 入 img 图 像 





在 画布 中 的 图 片 比 HTML 的 < img > 图 片 有 更 多 的 可 操作 性 ,其 中 一 个 操作 是 图 片 的 
缩放 、 裁 前 。drawImage() 是 一 个 多 态 性 函数 ,可 在 里 面 添加 不 同 的 参数 来 完成 图 片 的 缩 
放 、 裁 前 ,如 表 11-9 所 示 。 


表 11-9 图 片 缩放 ,裁剪 函数 和 参数 


函数 或 属性 说 明 
img. src= 例如 ,“images/qq_logo. png” 图 像 源 
drawImage(img, x,y, w, h) 在 x,y 坐标 上 写 和 人 img 图 片 , 缩 放 成 w 宽 h 高 
drawImage (img，clipx，clipy，| 在 clip(x,y) 坐 标 裁 前 clip(w,，h) 宽 高 的 图 片 , 写 入 x,y 坐标 并 缩放 
clipw，cliph ,x, y, wh ) 成 w 宽 h 高 的 图 片 
从 画布 中 剪 切 任意 形状 和 尺寸 ,用 rect() 等 绘图 函数 定义 一 个 区 域 ， 
接着 clip 〇 执行 后 ,所 有 之 后 的 画图 ,在 剪 切 的 区 域 部 分 才 显 示 

















clip() 





在 imgclip. html 的 以 下 代码 中 ,第 二 行 代 码 截取 了 QQ 的 右 眼 部 位 ,放大 后 ,在 坐标 
(20,370) 位 置 显 示 , 第 三 行 代码 是 截取 了 QQ 的 右手 ,在 坐标 (298,370) 位 置 略微 放大 显示 。 
见 例子 11-16 。 





context. drawImage(myQQ, 20,50); 
context. drawImage(myQQ, 148, 14, 92, 120, 20,370, 122,160); 
context. drawImage(myQ0, 235, 122, 65, 85, 298,370, 122,160); 











clip() 方 法 截取 的 图 片 完全 不 同 , 以 下 代码 中 , 先 用 rect() 定 义 一 个 截取 区 域 ,在 画 QQ 图 
片 时 , 落 入 到 截取 区 域 的 头 部 和 部 分 眼睛 被 截取 ,这 里 用 save() 和 restore() 实 现 取消 clip() 
这 个 截取 区 域 。 见 例子 11-16 。 








context. save( ); 例子 11-16: 

context. EA 0,0,200,200); part2/ch11/imgclip. html 
context. clip(); 

context. drawImage(myQQ, 0,0); 
context. restore( ); 











11.9.3 画布 插入 图 案 


图 案 就 是 用 图 像 以 某 种 方式 布局 来 美化 画布 ,首先 创建 
一 个 图 像 ,用 createPattern() 插 入 图 像 及 布局 方式 ,再 用 这 个 。 例子 11-17: 

设计 好 的 图 案 作为 填充 样式 fillStyle 的 值 ,如 表 11-10 所 示 。 Part2/chl1/ereatepatt. html 
见 例子 11-17。 
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表 11-10 画布 插入 图 案 的 函数 和 属性 




















函数 或 属性 说 明 
img=new image(); 创建 图 像 对 象 
img. src 一 例如 ,加载 “images/qq_icon. png” 图 像 源 
. 创建 img 图 案 , 图 案 布局 patt 值 是 repeat-x、repeat-y、repeat、 
newpatt= createPattern(img, patt) 
no-repeat 
fillStyle= newpatt; 用 图 案 设 置 填充 样式 





11.10 关于 3D 绘图 动画 和 矢量 图 


11.10.1 3D 绘图 


因为 Canvas 画布 规范 目前 是 2D 标准 ,要 想 在 2D 技术 下 实现 3D 画面 ,还 要 在 2D 的 
基础 上 模拟 3D 的 学 习 难 度 很 大 ,从 最 基本 的 点 到 线 ,然后 到 线 到 面 来 模拟 3D。 

值得 欣慰 的 是 ,WebGL(Web Graphics Library) 提 供 了 一 种 基于 Web 的 3D 绘图 标准 ， 
这 个 标准 是 由 AMD 爱立信、 谷歌 ,Mozilla .nVIDIA 以 及 Opera 等 技术 公司 组 成 的 工作 组 
制定 的 ,目前 的 主要 浏览 器 Mozilla Firefox、Apple Safari、Google Chrome 及 Opara 等 已 经 
支持 WebGL 标准 。 一 个 典型 的 应 用 例子 是 Google 搜索 引擎 在 2012 年 4 月 添加 了 支持 
WebGL 新 的 功能 ,用 户 在 搜索 框 里 输入 一 个 曲线 方程 ,Google 搜索 引擎 就 会 在 全 3D 的 空 
间 中 面 出 这 个 曲线 ! 

这 种 3D 绘图 技术 标准 支持 免费 开放 的 3D 图 形 规范 OpenGL ES 2. 0 开发 的 
JavaScript 接口 库 ,HTML 5 Canvas 可 以 调用 WebGL 提供 硬件 3D 加 速 演 染 ,浏览 器 可 以 
借助 系统 显卡 来 流畅 地 展示 3D 场景 和 模型 ,借助 WebGL 技术 标准 , 免 去 了 开发 3D 网 页 
专用 泻 染 插件 及 学 习 难 度 ,实现 Web 应 用 用 来 设计 3D 动画 及 游戏 制作 等 。 

目前 ,WebGL 已 经 提供 成 熟 的 JavaScript API 库 three.js, 主 要 用 于 3D 游戏 开发 可 以 
到 中 文 WebGL 的 学 习 网 站 http://www. hewebgl. com/ 进 一 步 了 解 。 下 面 是 一 些 经 典 的 
WebGL 演示 例子 。 

(1) http://madebyevan. com/webgl-water/ ,一 个 水 池 波 纹 动态 效果 。 

(2) http://www. spacegoo. com/wingsuit/ 井 ,一 个 三 维 空间 飞行 效果 。 

(3) http://inear. se/visualeyezer/ ,一 个 三 维 眼球 的 运动 效果 。 


11.10.2 动画 


HTML 5 画布 虽然 没有 提供 专门 的 动画 的 接口 技术 ,但 是 通过 HTML 5 的 Canvas 画 
布 API 和 CSS 3 提供 的 简单 动画 Canimation) 属 性 ,能 够 让 我 们 快速 实现 简单 的 动画 效果 。 
其 基本 原理 是 在 一 个 规定 的 时 间 段 内 重新 计算 绘制 图 形 位 置 坐标 ,绘制 新 图 形 ,然后 删除 旧 
图 形 来 模拟 出 一 个 动画 效果 ,例如 用 context. clearRect(x, y,w,h) 方 法 来 清除 图 形 。 


11.10.3 矢量 图 
大 多 数 的 图 形 格式 都 是 位 图 ,图 形 的 信息 是 以 像素 方式 保存 ,而 可 缩放 矢量 图 形 
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(Scalable Vector Graphics,SVG) 保 存 的 是 一 些 图 形 信息 的 参数 和 一 些 绘图 行为 的 数据 描 
述 ,SVG 是 由 XML 组 成 的 。 

SVG 具有 以 下 很 多 的 优势 。 

(1) SVG 图 形 保存 的 是 数学 公式 创建 的 数据 ,无 须 存 储 每 个 独立 像素 的 数据 ,所 以 它 
的 文件 更 小 ,压缩 性 更 强 ,更 适合 网 络 应 用 ,减少 带宽 的 占用 。 

(2) 矢量 图 形 在 缩放 过 程 中 不 会 产生 失真 ,更 好 地 保存 图 像 质量 。 

(3) SVG 图 像 由 浏览 器 泻 染 , 可 以 以 编程 方式 绘制 。SVG 图 像 可 动态 地 更 改 , 这 使 它 
们 尤其 适合 数据 驱动 的 应 用 程序 ,比如 图 表 。 

(4) SVG 图 像 的 源 文件 是 一 个 文本 的 XML 文件 ,容易 被 阅读 器 ,搜索 引擎 访问 。 

(5) SVG 图 像 更 容易 与 DOM、CSS 和 JavaScript 交互 。 

(6) SVG 不 仅 可 以 制作 二 维 图 像 ,还 可 以 制作 动画 。 

目前 大 多 数 浏览 器 已 经 支持 SVG ,可 以 选择 用 矢量 图 形 工 具 来 创建 一 个 矢量 图 ,例如 
Adobe Illustrator, 也 可 以 通过 代码 编辑 器 ,以 写 代码 的 方式 来 创建 一 个 图 像 。 下 面 简单 地 
创建 一 个 SVG 图 像 ,并 把 它 运用 到 HTML 网 页 中 。 

(1) 创建 SVG 图 形 , 这 是 一 个 XML 文件 ,文件 扩展 名 为 SVG。 下 面 的 代码 是 从 (xl， 
yl1) 到 (1x2,y2) 画 一 个 蓝 色 的 12px 粗 的 水 平 线 。 这 个 文件 由 < svg > 元 素 和 < line > 元 素 组 
成 ,还 包括 一 些 属性 描述 。SVG 还 有 更 多 的 创建 图 形 的 元 素 ,例如 ,< rect > 矩形 .< circle > 
圆 、< eclipse > 椭圆 等 。 代 码 如 下 。 





< svg xmlns = "http://www.w3.org/2000/svg" version = '1.1' 

width= "100%" height ="100%"> 
<line xl = '20' yl = "120" x2 = '300'y2= '120'style = 'stroke:blue; stroke — width:12'/> 
</svg> 











(2) 我 们 可 以 在 HTML 网 页 中 直接 用 图 像 的 方式 加 载 SVG 图 形 , 例 如 ,将 上 面 的 代码 
保存 为 文件 line. svg, 我 们 把 这 条 蓝 线 加 载 到 网 页 中 ,代码 如 下 。 





background - image: url("line. svg"); 





或 者 在 CSS 中 引用 SVG 图 形 作为 背景 图 ,代码 如 下 。 





<body> 

< svg width = "300" height = "300" > 

< rect width= "60%" height = "30%" fill= "blue" /> 
</svg> 

</body> 








甚至 可 以 把 简化 的 SVG 代码 直接 嵌入 到 HTML 网 页 中 ,代码 如 下 。 








< img src= "line. svg" alt= "MY SVG line" /> 例子 11-18: 
part2/ch11/svg. html 
完整 的 SVG 绘图 见 例子 11-18。 除 了 简单 的 绘图 功能 ， - 一 
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在 SVG 图 形 中 还 可 以 定义 阴影 .渐变 等 特效 。 对 于 复杂 的 图 形 ,还 可 以 用 图 像 处 理工 具 来 
创建 ,并 以 SVG 图 形 格式 来 保存 。 


1. 画 不 同 的 线条 外 观 ,注意 使 用 strokeStyle 的 其 他 属性 。 

2. 编写 代码 , 画 两 条 独立 不 交接 的 线条 ,可 不 可 以 填充 颜色 ? 

3. 用 表单 的 type 二 color,range 来 定义 画笔 的 颜色 和 粗细 ,然后 画 线 。 
4 

5 





. 编写 代码 ,比较 轮廓 与 填充 画图 的 区 别 。 
. 使 用 clearRect() 夯 矩形 ,来 完成 橡皮 擦 功能 ,用 表单 让 用 户 输 入 清除 区 域 的 坐标 , 执 


al 
隋 
潍 
落 


和 
6. 给 网 页 加 图 形 背 景 ,做 一 个 div 块 填充 颜色 作为 背景 ,再 给 块 添加 透明 度 , 让 块 可 以 
看 到 页 面 的 背景 图 。 
7. 修改 例子 11-6, 夯 左边 的 半圆 ,轮廓 线 粗 为 10px, 颜 色 为 红色 ,填充 蓝 色 。 
8. 在 例子 11-7 代码 基础 上 ,调节 clockwise 二 true 顺 时 针 , 看 看 和 逆 时 针 的 区 别 。 
9. 在 例子 11-8 代码 基础 上 ,加 入 更 多 的 渐变 颜色 。 
10. 在 例子 11-9 代码 基础 上 ,改变 圆心 1 坐标 ,改变 辐射 渐变 外 观 , 形 成 锥 形 。 
11. 在 例子 11-12 代码 基础 上 ,用 fillStyle 属性 来 设置 第 二 个 圆 的 透明 度 ,比较 效果 。 
12. 用 变换 制作 一 个 动画 ,做 一 个 正方 形 的 旋转 。 
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文件 与 拖 放 技术 


12.1 File 文件 


在 HTML 5 以 前 ,浏览 器 客户 端 是 不 允许 文件 存储 操作 的 ,文件 可 以 通过 表单 元 
素 input 的 type= "fle" 属 性 进行 读 取 上 传 。HTML 5 增加 了 File API 本 地 文件 操作 接 
口 ,允许 更 多 的 本 地 文件 操作 ,但 是 ,为 了 安全 ,File API 仅 提供 读 取 本 地 的 文件 ,但 不 
能 修改 、 删 除 、 创 建新 文件 。File API 是 浏览 器 公司 Mozilla 最 早 向 W3C 组 织 提交 的 一 
个 草案 。 


12.2 HTML 的 文件 操作 


在 计算 机 高 级 语言 中 ,例如 Java、.C/C++ 等 中 都 有 文件 操作 的 API, HTML 页 面 操作 文 
件 有 下 面 三 种 方式 。 

(1) 通过 表单 的 < input type 二 "file"/> 得 到 文件 ,再 用 JavaScript 和 AJAX 技术 处 理 上 
传 ,下 载 文件 。 代 码 如 下 。 





< input type = "file" onchange = "processFile(this. files)" /> 





(2) 通过 表单 的 multiple 属性 一 次 性 读 取 多 个 文件 。 代 码 如 下 。 








< input type= "file" multiple = "true" onchange = "processFile(this. files)" /> 








(3) 通过 新 的 拖 放 技术 读 文 件 。 

HTML 的 文件 主要 由 三 个 文件 对 象 来 操作 : Blob、File 和 FileReader。 具 体 说 明 如 下 。 

(1) Blob, 是 表示 原始 的 二 进 制 数据 流 , 具 有 流 的 大 小 size 属性 和 clice() 切 制 数 据 流 的 
方法 。Blob 对 象 可 以 从 Blob 构造 函数 产生 ,也 可 以 在 一 个 已 有 Blob 对 象 上 ,通过 slice() 
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方法 切 出 另 一 个 Blob 对 象 , 甚 至 可 以 调用 Canvas 对 象 上 的 toBlob 方法 产生 。 

(2) File, 是 Blob 的 子 对 象 , 从 数据 流 形成 文件 对 象 ,增加 了 文件 名 name、 文 件 类 型 
type 等 属性 。File 文件 对 象 多 数 情 况 下 是 通过 表单 元 素 获 取 的 ,返回 一 个 FileList 的 数组 
对 象 ,或 者 是 来 自 拖 放 操作 生成 的 DataTransfer 对 象 。 

(3) FileReader, 是 一 个 用 来 操作 文件 异步 读 取 的 对 象 , 通 过 FileReade() 构 造 函 数 创 
建 ,再 通过 事件 的 回调 函数 ,可 以 对 Blob 和 File 对 象 进行 读 取 操作 。 








12.3 File API 读 取 文 件 属 性 


File 对 象 包含 基本 只 读 属 性 , 见 表 12-1, 通 过 浏览 器 可 以 读 取 操作 系统 下 的 这 些 文件 
属性 。 
表 12-1 File 对 象 的 属性 























属 性 说 明 属 性 说 明 
name 不 带 相 对 路 径 的 文件 名 type 文件 类 型 MIME 
size 文件 大 小 lastModifiedDate 文件 更 改 时 间 


在 例子 12-1 的 file. html 中 ,通过 表单 的 change 事件 e。 来 获取 File 对 象 数组 ,代码 
如 下 。 





seemeee 
var files = e.target.files; 例子 12-1: 


part2/ch12/fileapi/file. html 











将 获取 的 每 一 个 文件 的 属性 存放 到 output[ ] 数 组 对 象 
里 面 ,代码 如 下 。 





output. push(f.name + '——'+f.type+"—-—-"+f.sizet+'bytes'+'——'+ 
f. lastModifiedDate. toLocaleDateString()); 





把 文件 输出 到 页 面 ,代码 如 下 。 





document. querySelector("#1ist"). innerHTML = output. join('<br />'); 











12.4 FileReader 读 文件 的 方法 和 事件 
通过 FileReader 对 象 来 操作 文件 ,必须 要 创建 一 个 FileReader 对 象 实例 ,代码 如 下 。 





Var reader = new FileReader(); 











然后 通过 异步 事件 和 方法 来 完成 文件 操作 。FileReader 的 方法 如 表 12-2 所 示 。 
FileReader 的 事件 如 表 12-3 所 示 。 
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表 12-2 FileReader 的 方法 


发 

















方 法 说 明 
readAsText(file, [encode]) 以 文本 方式 读 取 文 件 ,encode 表示 文字 的 编码 字符 集 ,默认 UTF-8 
readAsDataURL(file) 读 取 文 件 返回 基于 base64 编码 的 Data-URL 数据 格式 包 
readAsArrayBuffer(file) 读 取 到 数组 缓存 
abort() 读 取 中 断 





表 12-3 FileReader 的 事件 

















事 件 说 明 

onloadstart 开始 读 文件 时 触发 

onpragress 读 取 过 程 中 定时 触发 。 事 件 参数 中 可 以 提取 已 读 取 文件 的 数据 量 
onabort 读 文件 中 止 时 触发 

onerror 读 文 件 出 错时 触发 





onload 


读 文件 成 功 完成 时 触发 。this. result 获取 读 取 的 文件 数据 ,如 果 
是 图 片 ,将 返回 base64 格式 的 图 片 数据 








onloadend 读 取 文件 完成 时 ,成 功 或 者 失败 都 会 触发 


12.5 读 取 图 片 和 文本 文件 操作 


例子 12-2 的 file-image. html 包含 读 取 图 片 代 码 ,图 片 文 
件 处 理 主要 从 以 下 几 方 面 人 手 。 

(1) 文件 类 型 过 滤 ,通过 file. type 获取 文件 类 型 ,例如 图 
片 格式 是 “image/jpeg”, 前 面 的 image 开头 表示 是 图 片 文件 ， 
“/” 后 面 表示 图 片 文件 的 扩展 名 ,通过 正则 表达 式 检查 读 取 的 
文件 是 不 是 图 片 ,代码 如 下 。 


RE 
例子 12-2: 
part2/ch12/fileapi/files- 
image. html 





if (/image\/\w+/.test(file. type)) 











(2) 或 者 ,通过 accept 属性 添加 文件 类 型 选择 ,HTML 5 在 表单 中 对 file 输入 类 型 添加 
了 accept 属性 , 当 浏 览 器 打开 文件 选择 窗口 时 ,可 以 按 accept 的 值 过 滤 文 件 类 型 。 代 码 


如 下 。 





< input type = "file" accept = "image/ x* " /> 











(3) 图 片 预览 ,创建 reader 对 象 ,readAsDataURL (file) 读 取 图 片 ,并 转换 成 Data-URL 


格式 的 数据 ,代码 如 下 。 





Var reader = new FileReader( ); 
reader. readAsDataURL(file); 
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(4) 图 片 读 取 完 成 后 ,通过 事件 e. target. result 获得 图 片 Data-URL 数据 包 , 赋 值 给 
<img > 的 src 属性 ,在 HTML 显示 区 域 显示 图 片 。 代 码 如 下 。 





var img = document.createElement("img"); 
img. height = 80; 
img. src = e.target. result; 
document. getElementById( 'list'). insertBefore( img, nul1l1); 





(5) 或 者 ,从 文件 对 象 file 获取 文件 的 DOMString 的 URL 数据 。 代 码 如 下 。 





img. src = window.URL.createObjectURL(file); 











读 取 文本 文件 咯 有 不 同 , 见 例子 12-3, 具 体操 作 如 下 。 ”ae 
(1) 从 表单 change 事件 evt 对 象 中 获取 文件 对 象 数 组 ， 例子 12-3: 


代码 如 下 。 part2/ch12/fileapi/files- 
text. html 





var files = evt. target. files; 








(2) 按 UTF-8 字符 编码 格式 读 取 每 一 个 文件 file 二 files[ 记 ,代码 如 下 。 





var reader = new FileReader(); 
reader. readAsText (file, "utf — 8"); 





(3) 通过 读 文件 完成 事件 onload 触发 ,把 文本 文件 输出 到 页 面 ,代码 如 下 。 





reader. onload = function(e) { 
Var pre = document. createElement( 'pre'); 
pre. innerHTML = e.target. result; 
document. getElementBYId( 'list'). insertBefore(pre, null); 
}; 











12.6 通过 AJAX 上 传 文件 


AJAX 技术 主要 是 异步 下 载 数据 文件 ,HTML 5 提出 了 XMLHttpRequest Level 2 草 
案 , 添 加 了 一 些 新 的 特性 ,其 中 ,FormData 就 是 新 增 的 一 个 对 象 , 模 拟 表单 用 post 方法 提交 
上 传 二 进 制 文件 。 下 面 就 具体 介绍 一 下 如 何 利用 FormData 来 上 传 文件 。 通 过 表单 输入 获 
得 文件 对 象 , 然 后 创建 一 个 formData 表单 数据 对 象 ,将 要 上 传 的 第 一 个 文件 f. files[0] 及 其 
他 数据 以 “ 值 /对 ”方式 封装 到 formData 对 象 中 ,例如 ,文件 说 明 。 代 码 如 下 。 





var 上 = document. getElementById("file"); 
var fd = new FormData(); 
fd.append("file", f.files[0]); 
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接着 ,创建 AJAX 通信 对 象 ,open() 打 开通 信和 接口 , send (fd) 发 送 到 服务 器 ,fd 是 
ormData 对 象 实例 。 代 码 如 下 。 





var xhr = new XMLHttpRequest(); 
xhr. open( "POST" ,"/upload" , true); 
xhr. send(fd); 











同时 ,还 需要 编写 服务 器 端的 代码 ,来 接收 客户 端 发 来 的 文件 ,服务 器 端 代 码 可 以 是 
JSP、.PHP、ASP .node. js 等 。 

例子 12-4 采用 node. js 服务 器 ,采用 express 模块 处 理 
路 由 , multer 模块 处 理 上 传 文件 。 服 务 器 端 代码 文件 是 幼子 12- 和 
node-server. js。 采 用 ECMAScript 6 的 编程 风格 。 关 于 ee 
node. js 服务 器 端 编程 , 见 第 25 章 全 栈 Web 开发 。 





12.7 拖 放 


拖 放 是 一 个 桌面 计算 机 常用 的 移动 对 象 的 方法 ,用 鼠标 选取 并 按 住 鼠标 左 键 抓 取 对 象 ， 
然后 拖 到 另 一 个 位 置 并 释放 鼠标 左 键 , 拖 放 对 象 移动 到 新 的 位 置 。 拖 放 技术 基本 上 可 以 替 
代 复 制 、 移 动 , 粘 贴 功能 。 

拖 放 技术 也 可 以 在 浏览 器 中 发 生 ,浏览 器 在 默认 情况 下 ,链接 ,文本 和 图 像 是 可 以 拖 动 
的 对 象 , 不 用 再 额外 添加 码 即 可 以 实现 。 但 是 ,如 果 想 让 其 他 元 素 标签 也 可 以 拖 动 ,那么 只 
有 HTML 5 标准 才能 让 这 种 在 操作 系统 下 常用 的 功能 在 浏览 器 网 页 中 实现 ,同时 ,HTML 
5 的 拖 放 技术 也 可 以 让 一 个 拖 放 对 象 从 操作 系统 界面 拖 放 到 浏览 器 中 。 


12.7.1 拖 放 对 象 属性 draggable 
HTML 5 为 所 有 HTML 元 素 规定 了 全 局 draggable 属性 ,表示 元 素 是 否 可 以 拖 动 。 链 
接 和 图 像 的 标签 中 .自动 将 draggable 属性 设置 成 true, 其 他 元 素 的 draggable 属性 的 默认 
值 是 false。 
draggable 是 一 个 枚 举 属 性 ,用 于 指定 一 个 标签 是 否 可 以 被 拖 电 ,有 4 种 取 值 , 见 表 12-4。 
表 12-4 draggable 属性 值 

















属 性 值 说 明 

true 表示 此 元 素 可 拖 放 

false 表示 此 元 素 不 可 拖 放 

auto 除 img 和 带 href 的 a 标签 表示 可 拖 放 外 ,其 他 标签 均 表示 不 可 拖 放 
他 任何 值 表示 不 可 拖 放 




















12.7.2 拖 放 对 象 与 目标 地 


这 里 介绍 的 是 网 页 内 的 拖 放 , 拖 放 对 象 可 以 是 HTML 的 任何 一 个 标签 元 素 ,需要 给 这 个 
元 素 加 入 draggable 属性 。 下 面 的 代码 是 将 一 个 图 像 设 置 成 可 拖 放 ( 图 像 默 认 是 可 拖 放 的 )。 
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< img src = "images/qq_logo. png" draggable = "true" id= "dragit" /> 





拖 放 的 目标 地 ,也 就 是 放 团 位置 ,可 以 是 HTML 任意 标签 ,可 以 加 属性 dropzone 来 标 
识 , 也 可 以 忽略 。 下 面 的 代码 是 把 一 个 div 元 素 作 为 拖 放 目的 地 。 





<div style = "width: 330px;min— height: 202px;border: 
1px solid #444;margin— top: 20px;overflow— y: scroll;" 
dropzone id = "drophere"></div> 











12.7.3 拖 放 事件 的 产生 
拖 放 事件 可 以 用 来 控制 拖 放 过 程 中 的 外 观 样式 变化 。 拖 放 事件 分 成 两 个 部 分 : 被 拖 电 


元 素 事件 和 目标 地 元 素 事件 。 
被 拖 放 元 素 事件 ,由 拖 放 开 始 、 拖 放 过 程 和 拖 放 结 束 三 个 事件 组 成 ,如 表 12-5 所 示 。 
表 12-5 被 拖 放 元 素 事件 
说 明 














事 件 
ondragstart 鼠标 选取 一 个 对 象 , 按 下 左 键 并 开始 触发 
ondrag 对 象 在 拖 电 过 程 中 连续 触发 ,即使 鼠标 不 移动 也 会 连续 触发 
ondragend 鼠标 左 键 释放 , 拖 电 结束 触发 


目标 地 元 素 事件 由 4 个 状态 组 成 ,被 拖 放 元 素 进入 目标 元 素 区 域 ,目标 元 素 成 功 接收 被 
拖 放 对 象 ,鼠标 左 键 释放 被 拖 放 对 象 及 鼠标 离开 目标 元 素 触 发 的 事件 ,如 表 12-6 所 示 。 
表 12-6 目标 地 元 素 事件 




















事 件 说 明 事 件 说 明 
ondragenter | 被 拖 放 对 象 进 入 目标 元 素 ondrop 释放 鼠标 左 键 触发 ,被 拖 放 对 象 释放 
ondragover | 目标 元 素 成 功 接受 被 拖 放 对 象 ondragleave | 鼠标 离开 目标 元 素 触发 


12.7.4 拖 放 事件 的 处 理 过 程 
拖 放 是 一 种 在 图 形 界面 下 的 复制 .移动 , 粘 贴 过 程 , 整 个 过 程 需 要 模拟 现实 世界 的 一 个 
物体 被 拿 起 、 移 动 和 释放 的 过 程 。 同 时 , 拖 放 也 被 认为 是 一 种 数据 传输 过 程 , 拖 放 事件 发 生 
时 ,系统 内 部 会 自动 创建 一 个 数据 传输 的 内 置 dataTransfer 对 象 , 通 过 这 个 对 象 的 方法 和 属 
性 来 控制 拖 放 过 程 中 产生 的 特效 效果 ,例如 ,通过 加 载 一 幅 图 像 来 显示 被 拖 动 的 对 象 元 素 。 
表 12-7 为 对 dataTransfer 对 象 的 方法 属性 的 进一步 说 明 。 
表 12-7 dataTransfer 对 象 的 方法 和 属性 
说 明 
在 被 拖 放 元 素 事件 中 写 和 人 拖 放 对 象 信息 ,两 个 参数 都 是 字符 串 类 型 ,key 用 来 说 
明 事件 类 型 ,也 可 以 是 任意 值 ,key 参数 值 类 型 为 "text" 或 是 "url", 则 会 被 转换 


成 "text/plain" 和 "text/uri-list" 





方法 或 属性 





setData( key, value) 
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续 表 





方法 或 属性 说 明 

getData() 可 以 取得 由 setData() 保 存 的 值 ,保存 在 dataTransfer 对 象 中 的 数据 只 
能 在 目标 元 素 事件 处 理 程序 中 读 取 

设置 光标 样式 (none、 copy、 copyLink、copyMove、 link、 linkMove、move、 all 和 
uninitialized) ; 在 事件 ondragstart 中 设置 





getData( key) 





effectAllowed 




















dropEffect 只 在 dragenter 与 dragover 事件 中 可 更 改 , 其 他 事件 中 只 可 读 取 
指定 一 幅 图 像 , 当 拖 动 发 生 时 ,显示 在 光标 下 方 。 这 个 方法 接收 的 三 个 参数 分 别 

setDragImage 是 要 显示 的 HTML 元 素 和 光标 在 图 像 中 的 x、y 坐标 。 其 中 ,HTML 元 素 ( 可 以 

(element, x, y) 是 隐藏 的 元 素 ) 可 以 是 一 幅 图 像 ,也 可 以 是 其 他 元 素 。 是 图 像 则 显示 图 像 , 是 其 
他 元 素 则 显示 泻 染 后 的 元 素 

types 获取 key 

files 获取 外 部 拖 放 文件 的 一 个 类 似 数 组 的 集合 (length)。 集 合 中 每 个 元 素 有 type 属 
性 ,依次 判断 拖 忠 的 文件 类 型 

拖 放 过 程 处 理 如 下 。 


(1) 在 拖 放 元 素 的 ondragstart 事件 中 用 dataTransfer 对 象 初始 化 相关 的 数据 信息 。 
下 面 代码 中 ,被 拖 放 对 象 dragIt 的 id 写 入 到 pic 变量 。 





dragIt. ondragstart = function(e){ e.dataTransfer. setData( 'pic', e. target. id);}; 











(2) 在 目标 元 素 的 ondragover 事件 中 ,通过 取消 其 默认 操作 event. preventDefault() 来 
改变 拖 放 特 效 。 下 面 代码 中 ,有 多 个 拖 放 目标 区 dropHere[ 让 ,在 拖 放 对 象 掠 过 目标 区 时 ， 
产生 特效 和 背景 颜色 变化 。 





dropHere[ i]. ondragover = function(e){ 
e.dataTransfer. dropEffect = 'move'; 
€. preventDefault( ); // 不 能 少 
this. style. background = 'red'; }; 











(3) 在 目标 元 素 的 ondrop 事件 中 , dataTransfer 处 理 接收 到 的 数据 是 通过 getData 
("Pic") 取 回 前 面 用 setData() 存 放 的 被 拖 放 的 对 象 元 素 ,e. preventDefault() 防 止 浏览 器 默 
认 打 开 这 个 拖 放 的 对 象 。e. target. appendChild() 将 拖 放 的 标签 对 象 插 入 到 目标 标签 下 。 





dropHere[ i]. ondrop = function(e){ 
e. preventDefault( ); 
var data = e. dataTransfer. getData( "Pic"); 
e. target. appendChild(document. getElementById(data)); }; 





(4) 在 被 拖 放 元 素 的 dragend 事件 中 ,移动 完成 的 时 候 触发 ,做 善后 工作 。 若 没有 则 可 
以 省 略 。 下 面 代 码 是 清空 目标 区 的 背景 颜色 。 





dropHere[ i]. ondragend = function(e){ 
this. style. backgro re 
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例子 12-5 分 别 是 拖 放 图 片 dragpic. html 和 拖 放 < a > 和 





<1i> 元 素 dragelement. html。 例子 12-5: 
part2/ch12/dragpic. html 和 
12.7.5 浏览 器 外 部 的 拖 放 dragelement. html 


ddd 例如 ,图 片 . 文 字 、 文 件 拖 入 浏 


览 器 里 面 


以 下 是 例子 12-6 的 部 分 代码 ,从 浏览 器 (Firefox 浏览 例子 12-6: 
器 ,其 他 浏览 器 可 能 有 兼容 问题 ) 外 部 拖 放 图 片 文件 到 浏览 器 part2/eh12/dragfile. html 
的 目标 区 。 











oDiv1l. ondrop = function (ev) { 
var files = ev,dataTransfer. files; 
var fileType = ev. dataTransfer. types; 
for (var i = 0, f; f = files[i]; i++) { 
Var reader = new FileReader(); 
reader. readAsDataURL(f£); 
reader. onload = function (f) { 
oDiv1. innerHTML = '< img src="' + this. result + '" title="' + f.name + '" width = 
"100%" />'; } 
ev. stopPropagation(); 
ev. preventDefault(); } 











oDivl 是 拖 放 目 标 区 ,通过 dataTransfer. files 得 到 拖 放 的 文件 对 象 数 组 ,再 通过 File 
API 的 FileReader 对 象 实例 及 图 片 文件 加 载 完 成 产生 的 事件 onload, 获 得 文件 对 象 的 结果 
信息 this. result, 以 < img > 标签 写 人 到 目标 区 。 


练习 


1. 在 例子 12-2 代码 基础 上 ,添加 更 多 的 FileReader 事件 ,来 检查 文件 的 加 载 过 程 。 

2. 在 例子 12-2 中 ,图 片 源 分 别 可 以 通过 两 种 方式 获取 ,一 种 是 通过 readAsDataURL 
(file) 返 回 (e. target. result) 图 片 base64 编码 的 Data-URL 格式 图 片 数据 ,和 window. 
URL. createObjectURL(file) 返 回 的 DOMString 格式 的 URL 图 片 数据 ,将 这 两 种 URL 数 
据 打印 出 来 ,分 析 它 们 的 区 别 。 

3. 用 拖 放 技术 做 一 个 模拟 垃圾 桶 的 功能 ,有 垃圾 显示 垃圾 桶 满 ,否则 显示 空 的 状态 。 

4. 编写 编码 ,看 看 能 否 拖 放 < canvas > 画布 到 另 一 画布 ? 

















History API 


13.1 浏览 器 翻 页 与 URL 地 址 


URL 地 址 是 指向 服务 器 端的 资源 识别 器 ,服务 器 端的 资源 是 物理 文件 ,例如 HTML、 
CSS、JavaScript、 图 片 文档 等 。 浏 览 器 可 以 帮助 我 们 记 住 曾经 访问 过 的 网 页 ,但 是 ,浏览 器 
是 通过 记录 网 页 的 URL 地 址 来 记录 访问 过 的 网 页 ,或 制作 成 书签 形式 保存 网 页 URL 
地 址 。 

如 果 一 个 URL 页 面 很 长 ,例如 ,一 个 指向 博客 评论 的 URL 页 面 地 址 可 能 就 包含 十 几 
页 的 评论 ,这 时 ,浏览 器 就 无 法 帮 我 们 记 住 内 容 某 一 个 页 面 的 具体 位 置 ,如 果 想 把 这 个 内 容 
页 面 转发 给 朋友 ,朋友 收 到 的 仅仅 是 URL 页 面 ,也 就 是 从 评论 的 第 一 页 开始 ,而 不 能 记 住 
你 想 转发 的 第 9 页 评论 。 


13.2 浏览 器 翻 页 与 AJAX 技术 


在 AJAX 应 用 中 , 它 可 以 帮助 网 页 只 更 新 部 分 内 容 , 而 不 是 下 载 更 新 整个 网 页 ,但 是 浏 
览 器 是 无 法 把 这 个 碎片 的 内 容 变化 作为 书签 记录 的 。 

过 去 解决 这 个 问题 的 方法 是 引入 “hashbang”( 井 1 模式 来 给 URL 地 址 加 碎片 识别 器 ， 
例如 Twitter 网 站 ,然后 ,由 JavaScript 获得 hashbang 值 来 决定 网 页 哪 一 部 分 需要 显示 、 更 
新 。 带 hashbang 的 URL 是 一 个 空 链接 , 是 不 能 直接 连接 到 服务 器 的 资源 的 ,需要 
JavaScript 在 客户 端 截获 这 个 链接 并 处 理 。 例 如 ,http://twitter. com/#!1xx/Joe 是 一 个 虚 
链接 ,http://twitter. com/Joe 是 一 个 实 链接 。 

现在 ,HTML 5 引入 History API 新 技术 来 帮助 我 们 记 住 一 个 URL 页 面 下 某 一 内 容 
页 面 的 变化 位 置 和 状态 ,从 而 可 以 恢复 这 个 网 页 的 某 一 部 分 的 变化 状态 。 
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13.3 History 对 象 与 浏览 器 翻 页 


History 对 象 在 HTML 4 中 就 已 经 存在 ,但 是 ,HTML 5 加 入 了 历史 记录 堆栈 方法 来 
记录 内 容 数据 的 变化 状态 。 如 表 13-1 所 示 是 History 对 象 的 属性 和 方法 。 


表 13-1 History 对 象 的 属性 和 方法 





























属性 方法 HTML 4 | HTML 5 说 明 
history. length A V 历史 记录 数 
history. goCn) V/ V 前 进 或 后 退 n 条 记录 ,n 可 以 是 负数 
history. back() - JV 往 后 
history. forward() V JV 往 前 
history. pushState(data, title [, url]) ~V 往 历史 记录 堆栈 顶部 添加 一 条 记录 
history. replaceState(data, title [, url]) JV 仅 更 改 当前 的 历史 记录 ,不 添加 
history. state Vv 获取 历史 堆栈 的 data 数据 
window. onpopstate V 响应 pushState 或 replaceState 的 调用 











在 例子 13-1 中 ,定义 了 4 个 模拟 页 面 及 内 容 , 代 码 如 下 。 





var contentState = { 
"pagel": ' 这 是 第 一 页 : historyAPI 介绍 页 '， 
"page2" : ' 这 是 第 二 页 : 演示 history 奇 迹 的 地 方 '， 
"page3": ' 这 是 第 三 页 : 介绍 如 何 应 用 HTML5 的 history API 技术 '， 
"page4" : ' 这 是 第 四 页 : 请 看 看 我 的 照片 '， 
"history" : ' 这 是 我 的 网 页 首页 ' 
}; 








对 应 的 HTML 页 面 代码 如 下 。 





二 = 
例子 13-1: 
part2/ch13/history. html 


<div id= "menu"> 
选择 下 面 页 面 查看 不 同 内 容 : < br/> 

<a href = "/pagel"> 第 一 页 </a> 
<a href = "/page2"> 第 二 页 </a> 
<a href = "/page3"> 第 三 页 </a> 
<a href = "/page4"> 第 四 页 </a> 

</div> 

<div id = "content"> 首 页 开始 </div> 














分 析 下 面 的 代码 ,其 原理 在 于 当 网 页 内 容 有 刷新 ,或 要 将 这 个 页 面 作 书签 时 ,就 要 通过 
pushState 记录 内 容 页 面 的 变化 状态 。 所 以 ,代码 通过 jQuery 的 $ (“a”). click() 监 控 用 户 
单 击 4 个 页 面 的 情况 。event. preventDefault() 禁 止 页 面 跳 转 ,而 是 由 getContentCurl) 刷 新 
某 一 个 单 击 页 面 内 容 。 同 时 ,history. pushState (contentState[ url] ,null, url) 记 录 内 容 的 
历史 状态 ,同时 也 保存 URL 地 址 ,让 这 个 内 容 页 面 变 化 与 URL 捆绑 在 一 起 ,而 这 个 URL， 
浏览 器 是 不 会 重新 加 载 网 页 页 面 的 ,类 似 于 AJAX 技术 . 仅 记 住 部 分 内 容 的 变化 。 这 就 是 
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History API 的 关键 技术 所 在 。 





$ ("a").click(function (event) { 
event. preventDefault( ); 
vara = event. target; 
Var url = a.getAttribute ('href'); 
getContent (url1); 
history. pushState (contentState[url], null, url);}); 











当 用 户 浏览 历史 内 容 时 ,例如 ,在 浏览 器 中 单 击 “ 后 退 ”“* 前 进 ” 按 钮 或 脚本 调用 history. 
back、history, forward 时 ,将 触发 onpopstate 事件 。 在 触发 onpopstate 时 ,通过 event. state 
获得 由 pushState 压 人 堆栈 的 状态 数据 ,从 而 恢复 用 户 浏览 的 历史 部 分 。 代 码 如 下 。 





window. addEventListener ('popstate', function (event) { 
var hs = history. state; 
if (hs !== null) {getContent(location. pathname)} 
else {location. href = 'history. html';} }); 











代码 演示 效果 如 图 13-1 所 示 ,代码 要 求 在 Web 服务 器 下 运行 。 可 以 看 到 浏览 器 URL 
地 址 是 一 个 虚拟 的 地 址 ,并 没有 直接 通过 URL 访问 page2 资源 ,page2 内 容 应 该 是 通过 
AJAX 技术 获取 更 新 。 


© localhost/page2 





这 是 第 二 页 : 演示 history 奇 迹 的 地 方 
Back | Forward 

















Url: /page2 | 
图 13-1 页 面 历史 界面 





练习 


1. 通过 实验 看 看 history. pushState() 和 history. replaceState() 的 不 同 。 
2. 通过 修改 例子 13-1 代码 ,使 用 不 同 链接 方法 back() ,forward() ,location. url() 和 < a >， 
深入 理解 虚 链 接 URL 和 实 链接 URL 的 区 别 。 


视频 音频 播放 


14.1 浏览 器 播放 视频 音频 

之 前 的 浏览 器 要 播放 视频 音频 ,都 需要 浏览 器 有 外 部 或 插件 的 播放 器 ,有 以 下 两 种 
方法 。 

(1) 浏览 器 用 < embed > 或 < object > 加 入 音频 视频 文件 ,播放 时 调用 外 部 的 播放 器 , 例 
如 ,Windows Media Player、Apple QuickTime 等 。 

(2) 浏览 器 安装 播放 器 插件 ,例如 ,微软 的 Silverlight、Adobe Flash 。 

所 以 ,HTML 4 要 实现 多 媒体 播放 ,可 以 用 < a > 标签 链接 到 媒体 文件 实现 下 载 播放 。 
例如 ,下 面 的 代码 : 





<a href = "movie. mp4"> 下 载 MP4 文件 </a> 
<a href = "movie. ogv"> 下 载 ogv/Theora 文件 </a> 
<a href = "movie. webm"> 下 载 WebM 文件 </a> 





或 者 通过 < object > 实现 多 媒体 播放 ,代码 如 下 。 





<object> 

< param name = "autostart" value= "false"> 

<param name = "src" value= "FILE. wav"> 

< param name = "autoplay" value = "false"> 

< param name = "controller" value= "true"> 

< embed src = "FILE. wav" controller = "true” 

autoplay = "false" autostart = "false" type = "audio/wav"> 

</object> 











现在 ,HTML 5 增加 了 < audio > 和 < video > 标签 ,直接 通过 浏览 器 内 部 的 媒体 播放 引擎 
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播放 。 由 于 浏览 器 HTML 5 播放 器 是 一 个 自由 的 播放 器 ,不 检查 版 权 保护 ,所 以 有 版 权 的 
音乐 .电影 最 好 不 用 < audio > 和 < video > 标签 加 载 。 


14.2 视频 音频 格式 及 转换 


某 些 视频 音频 的 格式 是 有 专利 许可 的 ,例如 , 像 MP3、MP4(H. 264) 是 需要 付 商业 许可 
费 的 。 条 款 规 定 : 产品 中 使 用 了 MP3/MP4 格式 的 解码 器 ,或 销售 用 MP3/MP4 格式 的 媒 
体 文件 ,用 户 数量 达 10 万 以 上 ,需要 支付 H. 264 的 许可 条 款 要 求 的 商业 许可 费 。 

媒体 文件 的 播放 涉及 媒体 文件 扩展 名 和 Web 资源 的 内 容 类 型 (MIME)。 在 计算 机 操 
作 系 统 中 ,文件 扩展 名 可 以 让 程序 自动 识别 打开 或 处 理 的 文件 。 而 在 基于 B/S 的 Web 应 
用 框架 下 ,Web 服务 器 在 给 浏览 器 发 送 文件 资源 时 ,会 带 一 个 MIME 类 型 说 明 ,浏览 器 根据 
MIME 来 判断 如 何 处 理 从 服务 器 发 来 的 文件 。 所 以 ,用 HTML 5 播放 器 播放 视频 音频 媒 
体 ,需要 在 Web 服务 器 端 设 置 MIME。 

不 同 的 浏览 器 厂家 会 支持 不 同 的 视频 音频 格式 ,如 表 14-1 所 示 。 


表 14-1 浏览 器 厂家 支持 的 视频 音频 格式 




















格 式 扩展 名 | MIME 类 型 说 明 浏览 器 支持 
MP3 .mp3 ”|audio/mp3 ”| 最 流行 的 音频 格式 ,许可 费 IE 9.Chrome,Safari\iOS 3 
音频 Ogg Vorbis |.ogg audio/ogg 免费 ,音频 标准 Firefox Chrome 、Opera 
WAV audio/wav “| 原始 音频 格式 ,未 压缩 Firefox、 Chrome、 Safari、 
Opera 
H. 264 i video/mp4 “| 最 流行 的 视频 行业 标准 ,许可 费 IE Oromes SaforiviOS 4、 
Android 2.3 
视频 |Ogg Theora |.ogv video/ogv 免费 ,开发 视频 标准 Firefox、Chrome,Opera 
Firefox、 Ch 、 、 
WebM . webm | video/webm | Goolge 购买 的 视频 标准 ,免费 人 hoe AD 
Android 2. 3 

















由 于 媒体 格式 不 统一 ,为 了 让 不 同 浏览 器 能 够 播放 媒体 ,需要 将 媒体 格式 进行 转换 。 
常用 转换 工具 见 表 14-2。 


表 14-2 常用 视频 音频 格式 转换 工具 
































工 具 功 能 费 用 下 载 
Audacity 音频 转换 免费 http://audacity. sourceforge. net 
Goldwave 音频 转换 付费 http://www. goldwave. com 
Micro Video Converter 视频 转换 开源 免费 http://microvideoconverter. com 
Firefogg Firefox 插件 免费 ly jd | 的 dd 
HandBrake 视频 转换 开源 免费 http://handbrake. fr 
Zencoder 视频 转换 商业 付费 http://zencoder. com 
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14.3 视频 音频 的 标签 元 素 


14.3.1 <video > 和 < audio > 标签 元 素 


视频 .音频 语法 格式 ,不 能 用 简化 的 闭合 标签 < audio/> ,必须 用 完整 的 </audio > 闭合 标 
签 。 这 两 个 元 素 包含 一 些 属性 来 简单 控制 媒体 的 播放 ,例如 ,controls 属性 告诉 浏览 器 显示 
播放 器 默认 的 控制 界面 。 更 多 的 属性 见 表 14-3 。 
表 14-3 video 和 audio 的 属性 























video/audio 属性 说 明 
二 auto 下 载 文 件 , 二 metadata 下 载 文件 头 数据 ,= none 不 下 载 任何 文件 

preload 数据 

共有 属性 | autoplay 浏览 器 打开 ,加载 媒体 文件 并 自动 播放 
loop 循环 播放 
controls 显示 播放 控制 界面 

video 属性 poster 用 于 替换 视频 初始 显示 的 图 片 
width,height | 设 定 视频 窗口 的 宽 高 








14.3.2 < source > 标签 
由 于 媒体 格式 的 问题 ,而 且 并 不 是 浏览 器 都 统一 支持 所 有 的 格式 ,所 以 在 网 站 开发 中 ， 
就 需要 定义 所 有 格式 来 满足 不 同 浏览 器 的 播放 要 求 。 
通过 < source > 标签 来 引入 不 同 格式 的 媒体 文件 ,而 不 是 通过 在 < audio >、< video > 中 的 
src 属性 引入 单一 媒体 文件 。< source > 标签 的 属性 见 表 14-4。 
表 14-4 ”< source > 元 素 的 属性 














source 属性 说 明 
src 媒体 源 
media 媒体 查询 列表 ,例如 “screen, 3d-glass, resolution > 900dpi” 
type 媒体 MIME 类 型 ,例如 : audio/mp3，video/mp4 





例子 14-1 中 ,MP4 需要 用 Chrome 浏览 器 打开 。 如 果 想 ER 
让 Firefox Chrome 浏览 器 都 可 以 打开 播放 媒体 ,除了 MP3 例子 14-1: 
音乐 文件 外 ,还 要 转换 成 ogg 格式 的 音乐 文件 。 同 样 道理 ,也 Part2/eh14/myaudiovideo， 
要 把 MP4 转换 成 ogv 格式 视频 。 下 面 是 修改 过 的 音频 部 分 ml 


的 代码 来 让 Firefox 浏览 器 也 可 以 直接 播放 音乐 。 





<audio controls> 
< source src = "soundl. mp3" type = "audio/mp3"> 
< source src = "sound1. ogg" type = "audio/ogg"> 
</audio> 
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以 上 代码 就 可 以 让 浏览 器 根据 自己 可 播放 的 文件 格式 来 选择 播放 。 所 以 ,Web 开发 人 
员 需 要 做 媒体 文件 的 格式 转换 ,以 满足 在 不 同 的 浏览 器 媒体 中 播放 的 要 求 。 
14.3.3 < track > 标签 
< track > 标签 元 素 用 来 作 视频 字幕 ,音频 歌词 的 显示 控制 ,其 属性 和 使 用 见 表 14-5。 
表 14-5 < track > 元 素 的 属性 




















track 属性 说 明 
Src 时 间 轨 语言 文件 ,字幕 文件 ,歌词 文件 
Srclang 时 间 轨 语言 
type label 标题 
default 默认 track 启用 
subtitle 字幕 翻译 ，caption 字幕 ，description 文字 说 明 ,chapters 章节 标题 ， 
metadata 脚本 点 的 元 内 容 





14.4 JavaScript API 控制 播放 


前 面 通过 HTML 元 素 实 现 的 多 媒体 播放 ,是 由 浏览 器 提供 的 播放 控制 及 界面 ,其 实 ， 
HTML 5 标准 还 提供 了 多 媒体 播放 的 JavaScript API, 让 开 
发 人 员 定制 自己 的 播放 器 。 例子 14-2: 

见 例子 14-2, 其 技术 是 通过 DOM 获得 < video > 或 Part2/ch14//customplayer/ 
<audio > 对象, 通过 这 个 媒体 对 象 的 属性 和 方法 编写 代码 来 castomplayer htm 
完全 控制 媒体 的 播放 , 见 表 14-6。 

表 14-6 ”< video > 或 < audio > 对 象 的 属性 和 方法 
































属性 .方法 说 明 
play() 播放 
pause() 暂停 播放 
stop() 停止 播放 
canPlayType() 检查 浏览 器 支持 的 播放 格式 
skip() 快速 跳 转 
currentTime 当前 播放 时 间 轨 
playbackRate 播放 速率 ,1 二 正常 ,二 1 快速 ,二 1, 慢 速 
paused true, 暂 停 





练习 


1. 修改 例子 14-2 代码 ,加 一 个 播放 速度 调节 按钮 ,每 次 按 2 ^n 递增 ,n 王 1,2,4,8， 
16,32。 

2. < video > 和 < audio > 都 有 controls 属性 来 显示 播放 控制 面板 ,这 个 控制 面板 在 不 同 
浏览 器 下 有 没有 差异 ? 

3. 使 用 特殊 字符 制作 一 个 简单 的 播放 控制 面板 。 
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客户 端 数 据 存储 


15.1 数据 存储 

Web 开发 的 系统 构架 是 B/S, 大 多 数 数据 的 存储 是 在 服务 器 端 完 成 ,浏览 器 仅 在 上 载 
文件 时 ,可 以 访问 本 地 文件 ,但 是 并 不 能 修改 本 地 文件 和 数据 ,除了 浏览 器 的 Cookie 文件 
外 ,修改 、 读 取 Cookie 文件 还 有 很 多 限制 。 

HTML 5 标准 开放 了 浏览 器 端的 文件 和 数据 存储 方式 ,这 样 的 好 处 是 使 打造 一 个 基于 
Web 的 本 地 应 用 成 为 可 能 ,并 且 , 几 乎 可 以 替代 C 或 C++ .Java 等 计算 机 高 级 语言 编写 的 应 
用 。 当 然 ,基于 网 络 的 Web 应 用 更 流行 .例如 ,Web 网 络 游戏 ,可 以 在 客户 端 存放 大 量 的 数 
据 来 降低 网 络 流量 。 如 图 15-1 所 示 是 HTML 5 时 代 , 数 据 存储 的 网 络 分 布 , 图 中 的 数据 存 
储 有 服务 器 和 客户 端 ,本 章 内 容 讲 的 是 浏览 器 端的 数据 存储 。 






服 
PHP.JSP.ASP… 


图 15-1 HTML 5 时 代 的 Web 数据 存储 


15.1.1 数据 存储 方式 比较 


Web 数据 存储 的 方式 与 域名 浏览 器 .网 页 登录 用 户 有 关 , 数 据 结构 .数据 容量 也 有 不 
同 , 见 表 15-1。 
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表 15-1 Web 存储 方式 比较 











存储 方式 生命 周期 | 保存 数据 结构 | 容量 安全 问题 存储 位 置 
Cookie 可 设 定 键 / 值 对 ,字符 串 | 4Kb “| 域名 ,浏览 器 ,用 户 相关 | 客户 端 
DOM 页 面 网 页 关闭 | 任意 ,字符 串 不 定 ”| 域名 相关 客户 端 





localStorage 永久 键 / 值 对 ,字符 串 | 5Mb “| 域名 ,浏览 器 ,用 户 相 关 | 客户 端 

sessionStorage 网 页 关闭 | 键 / 值 对 ,字符 串 | 5Mb “| 域名 ,浏览 器 ,用 户 相关 | 服务 器 ,客户 端 
数据 库 永久 结构 化 数据 50Mb | 域名 相关 客户 端 \ 服 务 器 
文 梓 永久 只 读 不 定 ”| 域名 相关 客户 端 \ 服 务 器 





























15.1.2 ”Cookie 与 Web 本 地 存储 比较 
HTML 5 扩展 了 客户 端 本 地 数据 存储 的 方式 ,其 优势 是 明显 的 , 见 表 15-2。 
表 15-2 Cookie 与 Web 本 地 存储 比较 























Cookie Web 本 地 存储 
通过 HTTP 访问 操作 存储 可 以 离线 ,客户 端 直接 操作 存储 
Cookie 还 可 以 被 其 他 服务 器 端 语言 操作 存储 ,如 完全 由 JavaScript API 操 作 存储 
PHP\JSP 
Cookie 与 浏览 器 和 域名 关联 会 话 存储 与 浏览 器 ,域名 和 打开 窗口 关联 
因为 Cookie 存储 要 通过 HTTP 传送 ,安全 性 差 , 通 
过 httpOnly 和 secure 设置 安全 性 人 


但 是 ,无 论 是 Cookie 存储 还 是 Web 存储 ,都 要 在 B/S 的 构架 中 运行 ,即使 是 离线 应 用 
也 要 有 服务 器 ,不 可 以 做 单机 应 用 。 


15.2 Web 本 地 数据 存储 


Web 本 地 数据 存储 必须 在 B/S 架构 的 环境 下 才 有 效 , 也 就 是 说 需要 Web 服务 器 的 支 
持 。 本 地 数据 存储 是 在 客户 端 存 储 简单 的 字符 串 数据 ,以 * 键 / 值 ? 对 方式 存储 。 有 以 下 两 种 
方式 。 

(1) localStorage: 类 似 于 Cookie 存储 ,但 是 是 永久 存储 ,没有 有 效 期 。 

(2) sessionStorage: 替代 HTML 4 的 Session 会 话 存储 ,是 在 浏览 器 端的 临时 数据 组 
存 。Session 会 话 是 浏览 器 打开 一 个 HTML 页 面 与 服务 器 通过 HTTP 建立 通信 后 ,由 服务 
器 发 送 给 浏览 器 一 个 会 话 ID。 浏 览 器 窗口 关闭 ,会 话 也 同时 结束 ,会 话 存储 也 同时 被 浏览 
器 删除 。 一 个 打开 的 窗口 不 能 读 取 另 一 个 窗口 的 会 话 存 储 , 而 Cookie 存储 可 以 被 另 一 个 来 
自 相 同 域名 和 浏览 器 打开 的 窗口 查看 。 


15.2.1 localStorage 和 sessionStorage 对 象 


在 JavaScript API 中 ,window. sessionStorage 是 会 话 存储 对 象 , window. localStorage 
是 本 地 存储 对 象 ,是 window 对 象 下 的 子 类 实例 ,所 以 ,在 语法 上 可 以 忽略 window 根 对 象 。 
它们 有 共同 的 属性 ,方法 ,只 是 存储 数据 的 生命 周期 不 同 。 用 这 些 属性 方法 来 实现 数据 
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的 存储 、 获 取 、 删 除 操作 , 见 表 15-3 。 
表 15-3 ”sessionStorage 和 localStorage 对 象 的 属性 和 方法 























属性 和 方法 说 明 属性 和 方法 说 明 
getItem(key) 通过 key 获取 存储 值 lear() 清除 该 存储 对 象 的 所 有 存储 数据 
setltem(key,value) 人 保存 key/value 对 key(n) 获得 第 n 个 键 名 称 
removeltem(key) ”| 从 存储 中 移出 key/value ength 存储 的 键 值 数 














也 可 以 通过 对 象 的 对 象 数组 以 及 key 键 属性 两 种 方式 访问 和 存储 键 值 , 见 表 15-4。 
表 15-4 更 多 的 方式 访问 和 存储 键 值 
对 象 属性 说 明 


localStorage[ "key" ]=value 








通过 对 象 数组 直接 存储 key 值 


sessionStorage[ "key" ]= value 





localStorage. key= value 通过 键 属性 ,存储 键 值 


sessionStorage. key= value 





value=localStorage[ "key"] 通过 对 象 数组 获取 key 键 的 值 
寸 对 ey 


value= sessionStorage[ "key"] 





value= localStorage. key 


通过 键 属性 ,从 存储 中 获取 键 值 





value= sessionStorage. key 





具体 见 例子 15-1。 例子 15-1: 


part2/ch15/webstorage. htm1 
15.2.2 ”Web 存储 的 事件 处 理 


Web 存储 会 产生 一 个 onstorage 事件 ,通过 这 个 事件 了 解 存储 过 程 ,及 key 值 的 改变 ， 
onstorage 事件 的 属性 见 表 15-5。 
表 15-5 ”onstorage 事件 的 属性 




















属 性 说 明 属 性 说 明 
key 被 修改 的 key newValue key 修改 后 的 新 值 
oldValue key 修改 前 的 值 url 修改 的 url 页 面 





例子 15-2 中 , storageEvent. html 代码 如 下 ,e 是 storage 的 事件 对 象 .每 刷新 一 次 
storageEvent. html 页 面 ,会 产生 存储 count 键 和 visitDate 键 的 两 次 更 新 。 在 测试 Web 存 
储 事件 时 ,必须 在 浏览 器 打开 两 个 Tab 来 访问 同一 个 storageEvent. html, 一 个 用 来 更 新 触 
发 存储 事件 ,一 个 用 来 查看 更 新 的 状态 。 








var mm = document. getElementById( "changed" ) ; 


innerHTML = "< br > Key:" + e.key; We 
i Part2/ch15/storageEvent. 
mm. innerHTML += "< br > OldValue:" + e.oldValue; bal 


mm. innerHTML += "< br > newvalue:" + e. newValue; 
mm. innerHTML += "< br > url:" +e.url; 
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15.2.3 保存 其 他 数据 类 型 


Web 存储 只 能 存储 字符 串 , 如 果 要 存储 其 他 数据 类 型 ,只 要 将 内 容 序列 化 成 字符 串 ,都 
可 以 存储 。 例 如 JSON 格式 的 数据 ,首先 需要 转换 成 字符 串 来 存储 。 如 下 代码 就 是 将 
student 的 JSON 对 象 , 通 过 JSON. stringify(student) ,转换 成 studentStr 的 字符 串 , 再 以 
thisStudent 的 键 值 保 存 到 sessionStorage 中 ,通过 sessionStorage. thisStudent 读 回 这 个 字 
符 串 值 , 然 后 通过 JSON. parse(studentStr) 转 换 回 student 的 JSON 对 象 。 代 码 如 下 。 





var student = { name:'Jim',age:'35'}; //JSON 格式 数据 
var studentStr = JSON. stringify(student); // 转 换 成 字符 串 
// 存 人 Web storage 

sessionStorage, thisStudent = studentStr; 

// 读 取 

studentStr = sessionStorage. thisStudent; 

// 重 新 转换 为 JSON 对 象 

student = JSON. parse (studentStr); 











15.3 数据 库存 储 


早期 的 Web 应 用 系统 数据 库 都 是 在 服务 器 端 工作 , HTML 5 标准 给 客户 端 开放 了 数 
据 库 的 应 用 ,将 以 前 必须 保存 在 服务 器 上 的 数据 转 为 在 客户 端 本 地 存储 ,这 样 大 大 提高 了 
Web 应 用 程序 的 性 能 ,减轻 了 服务 器 端的 负担 ,同时 也 减轻 了 网 络 带 宽 的 流量 ,使 Web 时 
代 的 应 用 更 接近 于 Java、C++ 等 高 级 语言 编写 的 应 用 。 客 户 端 Web 数据 库 是 内 置 于 浏览 器 
的 数据 库 引 擎 ,又 分 为 Web SQL 和 IndexedDB。 这 两 个 数据 库 的 主要 区 别 如 下 。 

(1) Web SQL 更 像 是 关系 型 数据 库 , 采 用 SQLite 文件 型 数据 库 , 这 种 数据 库 是 针对 于 
嵌入 式 系统 开发 的 ,所 以 ,很 多 智能 移动 设备 中 都 默认 安装 了 SQLite 数据 库 支持 ,在 移动 
Web 开发 中 还 被 广泛 使 用 。 

(2) 由 于 Web SQL 规范 采用 SQLite 的 数据 库 支持 ,W3C 组 织 无 法 去 修改 和 重新 制定 
SQLite 的 语言 规范 ,在 2010 年 停止 了 对 Web SQL 规范 的 支持 。 但 是 SQLite 数据 库 是 跨 
平台 的 ,很 多 计算 机 语言 可 以 直接 创建 数据 库 , 所 以 ,大 多 数 浏览 器 仍然 支持 Web SQL。 

(3) IndexedDB 更 像 是 一 个 NoSQL 数据 库 , 采 用 对 象 存 储 方式 存储 数据 ,而 不 是 用 
SQL 的 结构 存储 , 它 更 适合 事务 性 处 理 。 

(4) IndexedDB 解决 了 Web 本 地 存储 在 容量 上 的 不 足 , 它 可 以 存储 大 容量 的 结构 化 数 
据 , 并 提供 高 性 能 的 查询 索引 。 

(5) IndexedDB 的 API 非常 强大 ,如 果 仅 开发 一 个 简单 的 数据 库存 储 , 它 又 过 于 复杂 。 


15.3.1 Web SQL 
首先 ,检测 浏览 器 对 Web SQL 的 支持 情况 : 





function testwebSQL() {return window. openDatabase;} 
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和 传统 的 关系 数据 库 一 样 ,Web SQL 数据 库 操作 基本 分 为 三 个 步骤 完成 ,如 图 15-2 所 示 。 


应 用 数据 库 操作 的 基本 方法 如 下 。 
(1) openDatabase: 打开 现 有 数据 库 或 新 建 2 i es sy Se 
数据 库 , 创 建 数据 库 对 象 。 连接 


(2) transaction: 通过 数据 库 对 象 产生 一 个 
事务 对 象 ,控制 事务 提交 或 回 滚 。 

(3) executeSQL: 通过 事务 对 象 执行 SQL 数据 库 操作 语句 。 

具体 操作 见 表 15-6。 





图 15-2 Web SQL 数据 库 操作 三 部 曲 





表 15-6 Web SQL 数据 库 操作 方法 








核心 方法 对 象 ,属性 ,方法 说 明 
Web SQL 数据 5 个 参数 : 数据 库 名 ; 四 数据 库 版 本 ;， @ 数 据 
库 创建 或 打开 已 | db 二 openDatabase(…) 库 描述 ; 四 数据 库 大 小 (Byte); @ 回 调 函 数 。 打 
有 的 数据 库 开 一 个 已 存在 的 数据 库 , 要 有 相同 的 版 本 号 





querysql: SQL 事务 回调 函数 ,其 中 有 一 个 参数 tx 
db, transaction(qureysql, errorCallback, | 就 是 事务 对象 ,可 以 执行 SQL 语句 ( 必 选 )。 
successCallback) errorCallback: 出 错 回 调 函 数 ( 可 选 )。 
successCallback: 执行 成 功 回调 函数 (可 选 ) 

function(tx){…} 就 是 上 面 的 transaction 函数 的 
第 一 个 参数 querysql。executeSQL 函数 参数 : 
sql 为 标准 SQL 语句 ,[] 为 SQL 参数 集 ,如 果 sql 
带 ? 参数 ,[ ] 里 列 出 相应 值 , successcallback 和 
errorcallback 为 回调 函数 ,处 理 SQL 结果 或 错误 


创建 一 个 事务 





在 一 个 事务 中 执 | function(tx) {tx. executeSQL(sql, []， 
行 SQL 语句 sucesscallback ,errorcallback) ;*…} 








通过 例子 15-3, 分 析 具 体操 作 步 骤 如 下 。 





(1) 创建 数据 库 ,代码 如 下 。 例子 15-3: 
part2/ch15/ 

var db = openDatabase( 'mydb', '1.0', 'this is a test DB', websqlstudent. html 

2094); 








(2) 创建 表 , 代 码 如 下 。 





db. transaction(function (tx) { 
tx. executeSql ( 'CREATE TABLE IF NOT EXISTS students (id unique, nametext, 
age integer)');}); 





(3) 插入 数据 代码 如 下 。 





db. transaction(function (tx) { 

tx. executeSql( 'CREATE TABLE IF NOT EXISTS students (id unique, nametext, 

age integer)'); 

tx. executeSql( 'INSERT INTO students( id, name,age) VALUES (1, "Joe",21)'); 
tx. executeSql( 'INSERT INTO students( id, name,age) VALUES (2, "Mark",19)"');}); 
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(4) 或 者 用 变量 来 输入 数据 ,eid、ename、eage 分 别 是 映射 到 数据 表 的 三 个 变量 ,代码 
如 下 3 





tx. executeSql( 'INSERT INTO Students (id, name,age) VALUES (?, ?,?'), [eid, ename, eage]; 





(5) 查询 数据 ,并 将 结果 显示 到 id 选择 器 为 show 的 标签 元 素 里面 。 这 里 用 到 了 成 功 
回调 函数 function (tx,results)。 代 码 如 下 。 





db. transaction(function (tx) { 
tx. executeSql( 'SELECT x FROM students', [], function (tx, results) { 
var len = results. rows. length, i; 
msg = "<p> 查 到 : " + len + "学 生 </p>"; 
document. querySelector('# show'). innerHTML += msg; 
for (i = 0; i< len; i++){ 
msg = "<p><b> 学 生 名 : " + results. rows. item(i).name + "</b></p>"; 
document. querySelector('# show'). innerHTML += msg; 
二 





(6) 删除 id 三 1 的 数据 ,及 关于 错误 回调 函数 function(tx,err) 的 使 用 代码 如 下 。 





db. transaction(function (tx) { 
tx. executeSql( "delete from students where id= ?",[1], 
function (tx, result) {}, 
function (tx, err) {console. error(err. message); }); 


D); 











15.3.2 IndexedDB 


IndexedDB 是 一 个 侧重 于 事务 型 的 系统 ,也 是 基于 NoSQL 数据 库 系 统 ,所 以 , 它 没有 
固定 的 数据 库 表 ,也 不 用 SQL 语句 操作 数据 库 数据 ,IndexedDB 是 一 个 基于 JavaScript 面 
向 对 象 的 数据 库 。IndexedDB 可 以 存储 数据 对 象 ,然后 通过 键 (Key) 值 索引 来 检索 对 象 。 
所 以 ,从 传统 的 关系 数据 库 角 度 学 习 IndexedDB 有 一 定 的 难度 。 

IndexedDB 的 工作 原理 是 把 数据 对 象 存储 在 一 个 objectStore 数据 仓库 里 ,objectStore 
数据 仓库 就 相当 于 关系 数据 库 里 的 表 或 容器 ,IndexedDB 可 以 有 很 多 objectStore 数据 仓 
库 , 一 个 objectStore 数据 仓库 里 可 以 存储 很 多 数据 对 象 。 

IndexedDB 采用 操作 异步 方式 的 API, 也 就 是 请 求 -响应 的 模式 。 例 如 ,打开 数据 库 , 不 
像 WebSQL 就 直接 获得 数据 库 对 象 ,IndexedDB 首先 获得 的 是 一 个 request 的 请 求 对 象 ,再 
通过 响应 的 事件 异步 获取 数据 库 对 象 。 

不 同 域名 的 网 页 创建 的 IndexedDB 数据 库 , 只 限制 来 自 相同 域名 的 网 页 访问 ,不 可 路 
域名 访问 求 其 他 IndexedDB 的 数据 库 。 

IndexedDB 的 数据 库 操 作 过 程 如 图 15-3 所 示 。 

下 面 通过 例子 15-4 来 分 析 IndexedDB 数据 库 操作 过 程 。 首 先 ,创建 和 连接 数据 库 是 通过 
window 对 象 下 的 内 置 IndexedDB 对 象 的 open() 方 法 调用 .返回 一 个 IDBOpenDBRequest 请 求 
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a 
es et >| 交 中 获 取 数据 | _、 
| 库 对 象 实例 

db 




















创建 数据 库 仓库 对 象 
store= 

db.createObjectStore 

创建 事务 对 象 tran= 


db.transaction 





使 用 索引 
创建 数据 仓库 索引 有 
store.createIndex storeindex 

数据 异步 操作 ， 添 
获取 数据 仓库 对 象 ”所 加 ， 读 取 ， 更 新 ， 
Store = tran.objectStore 删除 ， 并 产生 事件 


图 15-3 ”IndexedDB 数据 库 操作 过 程 


对 象 req, 并 触发 异步 响应 事件 ,事件 的 回调 函数 包含 一 个 事件 对 象 event 作为 参数 ,通过 
event, target. result 属性 就 获取 打开 的 IndexedDB 数据 库 对 象 db。 创 建 数据 库 的 版 本 默认 
是 “1”, 如 果 要 修改 ,添加 数据 到 数据 库 仓 库 表 objectStore, 需 要 变化 dbVersion 版 本 参数 
值 。 部 分 代码 如 下 。 






























var req = window. IndexedDB. open(dbName, dbVersion); 
req. onsuccess = function (event) {…)} 

req. onupgradeneeded = function (event) {…} 

req. onerror = function (event) {…} 

req. onblocked = function(event) {…} 











有 具体 的 数据 库 连接 方法 及 触发 事件 见 表 15-7。 
表 15-7 数据库 连接 方法 和 事件 
方法 和 事件 说 明 
建立 dbName 数据 库 名 连接 ,dbVersion 为 数据 库 版 本 ,默认 为 


“1”, 如 果 要 添加 数据 到 数据 库 仓库 表 , 要 变化 版 本 值 
当 dbVersion 二 存在 的 版 本 ,触发 成 功 事件 ,可 以 查询 ,但 不 能 修 





indexedDB. open(dbName, dbVersion) 





onsuccess 











改 数 据 
onupgradeneeded 当 dbVersion! 一 存在 版 本 ,触发 更 新 事件 ,可 以 修改 .添加 数据 
onerror 打开 数据 库 出 错 
onblocked 上 一 次 的 数据 库 连 接 没 有 关闭 








数据 库 连接 成 功 后 ,接着 创建 或 打开 数据 库 仓库 objectSotre,objectStore 存储 的 是 键 / 
值 对 ,但 是 ,这 个 值 对 不 是 简单 的 字符 串 值 ,而 是 JSON 数据 类 型 值 。 每 条 数据 记录 需要 指 
定 一 个 字段 作为 键 值 (keyPath) ,相对 于 SQL 的 primaryKey 主键 ,也 可 以 通过 内 部 自动 生 
成 的 递增 数字 作为 键 值 。 必 须 在 onupgradeneeded 事件 的 回调 函数 中 创建 或 打开 数据 库 
students 表 ,代码 如 下 。 





req. onupgradeneeded = function(e){ 
db = e. target. result; 
if(!db. objectStoreNames. contains('students')){ 
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Var store 





store. createIndex("name", "name", { unique: false }); 


= db. create0bjectStore( 'students', {keyPath:"id"}); 








具体 使 用 方法 说 明 见 表 15-8。 
表 15-8 创建 数据 库 仓库 表 的 方法 





方 法 


说 明 





var db 一 e. target. result 


通过 事件 对 象 获取 数据 库 对 象 





db. createObjectStore ( storeName, 


创建 数据 库 仓 库 表 ,storeName 为 数据 库 仓库 表 名 ,keyOptions 为 键 
的 类 型 ,有 两 种 : keyPath 外 联 键 和 autoIncrement 内 联 键 。 例 如 : 
{keyPath: "id') 用 数据 表 中 的 id 字段 作为 key; { autoIncrement: 








Oo false) ,内 部 产生 key, 手 工 递增 ; {autoIncrement:true} ,内 部 产生 
key, 自 动 递增 
db. deleteObjectStore(storeName) 删除 storeName 数据 库 仓库 表 


数据 库 仓 库 表 objectSotre 创建 或 打开 后 ,可 以 在 数据 库 仓 库 表 中 添加 、 修 改 、 删 除数 
据 , 但 是 ,首先 要 创建 一 个 事务 transaction。 事 务 中 需要 指定 该 事务 使 用 哪些 objectStore， 


可 以 用 数组 指定 多 个 objectStore 


。 事 务 还 需要 说 明 对 数据 的 操作 模式 ,有 如 下 三 种 。 


(1) readonly: 只 读 , 不 能 修改 数据 ,可 以 并 发 执行 。 
(2) readwrite: 读 写 ,可 以 进行 读 写 操作 ,异步 执行 。 
(3) versionchange: 版 本 变更 。 

获取 事务 对 象 也 是 异步 的 方式 ,会 产生 以 下 三 个 事件 。 


(1) abort: 事务 中 断 退出 。 


(2) complete: 事务 成 功 完成 。 


(3) error: 事务 出 错 。 
如 下 代码 是 以 读 写 方式 打开 


students 和 courses 数据 库 仓 库 表 , 先 获取 一 个 事务 对 象 


trans, 通 过 trans 对 象 获得 students 的 数据 库 仓库 表 对 象 store, 代 码 如 下 。 








var trans = db. transaction([students’, courses’ ], ’ readwrite’ ); 
var store = trans. objectStore(' 


students'); 








对 students 表 的 数据 操作 ,例如 查询 、 更 新 修改 、 删 除 等 是 异步 方式 执行 ,所 以 ,需要 一 
个 请 求 对 象 req 来 产生 onsuccess 或 onerror 事件 ,在 事件 的 回调 函数 中 处 理 数据 的 操作 结 


果 。 如 下 是 数据 的 查询 代码 。 





var req = store. get (key); 

req. onsuccess = function(e){ 
Var student = e. target. result; 
console. log( student. name); 


}; 
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如 下 是 数据 的 添加 代码 。 





var req = store.add( student) ; 

req. onsuccess = function(e){ 

console. log(" 数 据 添 加 成 功 !"); 
}; 








如 下 是 数据 的 修改 更 新 代码 。 





We | 
var req = store. get (key); 有 例子 15-4: 

Teq. onsuccess = function(e){ Part2/ch15/indexDBstudent. 
var student = e. target. result; 














html 
student.age = 18; a 
store. put( student); 
}; 
数据 表 的 具体 操作 方法 见 表 15-9。 
表 15-9 事务 与 数据 库 仓库 表 操 作 
建立 事务 和 数据 库 仓 库 表 操作 说 明 
var trans = db. transaction ([ 'students', 用 读 写 方式 ,打开 指定 students 和 courses 两 个 数据 库 仓 
'courses'], 'readwrite') 库 表 的 事务 ,第 一 个 参数 是 一 个 数组 





var store 一 trans. objectStore ('students'); | 通过 事务 对 象 获取 students 数据 库 仓 库 表 对 象 


添加 数据 ,用 key 键 添加 一 条 student 数据 对 象 ,key 键 参 
数 是 可 选 的 ,默认 是 创建 数据 仓库 表 定义 的 key 键 


查询 数据 ,通过 键 获得 数据 记录 的 一 个 异步 请 求 对 象 ,再 





var request = store. add(student, key); 

















var req= store. get(key) 通过 异步 事件 onsuccess 的 回调 函数 获得 JSON 数据 
对 象 
ES var student 一 e. target. result; 从 异步 请 求 req 中 获取 一 

req. onsuccess 一 function(e 个 student 数据 记录 对 象 

nn ee 修改 数据 ,通过 异步 事件 onsuccess 的 回调 函数 更 新 修改 
store. put(student, key); 一 个 student 记录 
store. delete(key); 删除 一 条 记录 
store. clear(); 清理 所 有 记录 ,但 保留 数据 库 仓库 表 








测试 indexdbstudent. html 代码 时 ,必须 在 B/S 环境 下 运行 ,用 Google 的 Chrome 浏览 
器 可 以 通过 开发 者 工具 的 Resource 查看 IndexedDB 的 数据 库 文件 和 表 的 变化 ,如 图 15-4 
所 示 , 通 过 Console 查看 程序 运行 的 输出 情况 。 

可 以 通过 游标 openCursor 方法 遍历 数据 ,在 数据 仓库 表 里 建立 一 个 游标 cursor ,游标 
的 建立 也 是 异步 操作 ,会 产生 事件 onsuccess 和 onerror, 通 过 事件 回调 函数 获得 游标 定位 的 
数据 对 象 data,data. key 获取 键 ,data. value 获取 数据 记录 。continue 移动 游标 指针 到 下 一 
个 数据 ,例如 以 下 代码 。openCursor 有 一 个 可 选 参数 ,来 说 明 游标 的 移动 方向 ,不 选 为 默认 
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图 15-4 通过 开发 者 工具 查看 数据 库 表 


next。 参 数 如 下 。 
(1) next: 下 一 个 。 
(2) pre: 前 一 个 。 


(3) nextunique: 唯一 的 下 一 个 , 跳 过 重复 键 。 
(4) preunique: 唯一 的 前 一 个 , 跳 过 重复 键 。 


代码 如 下 。 





var cursor = store.openCursor(); 

cursor. onsuccess = function(e) { 
var data = e.target. result; 
if (data) { 


data. continue( ); 


}} 





console. log("Name: ", data. value. name); 
console. dir("Age:", data. value. age); 





还 可 以 用 createIndex() 方 法 给 一 个 数据 库 仓 库 表 建立 索引 ,然后 通过 index 对 象 来 检 
索 数 据 。 如 下 代码 是 对 students 表 的 name 进行 索引 ,第 一 个 参数 为 索引 的 名 称 ,也 叫 


“name”, 第 三 个 参数 表示 name 可 以 重复 。 





store. createIndex( "name", " 





name", {unique:false}); 





通过 索引 快速 检索 数据 ,这 个 操作 也 是 异步 的 ,要 通过 异步 事件 获取 检索 的 数据 ,代码 
如 下 ,通过 index("name") 获 得 一 个 索引 名 为 “name” 的 索引 对 象 index, 通 过 get(name) 检 


索 一 个 students 表 中 的 名 字 name。 





Var index = store. index("name"); 

var req = index.get(name); 

req. onsuccess = function(e) { 
var date= e. target. result;} 








也 可 以 通过 IDBKeyRange 对 象 的 4 种 方法 创建 一 个 range 对 象 ,来 指定 索引 keys 读 


取 的 数据 范围 ,如 下 。 
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(1) lowerBound(key): 指定 范围 的 下 限 ,keys 之 key。 

(2) upperBound(key) : 指定 范围 的 上 限 ,keys 近 key。 

(3) bound(keyl,key2): 指定 范围 的 上 下 限 ,keyl 二 keys 三 key2。 

(4) only(key) : 指定 范围 中 只 有 一 个 值 ,keys 王 key。 

以 下 代码 就 是 限制 检索 students 表 的 name, 检 索 范 围 是 *L” 开 头 到 “K” 之 间 的 名 字 , 代 
码 如 下 。 





var index = store. index("name"); 
var range = IDBKeyRange. bound('L', 'K'); 
index. openCursor(range).onsuccess = function(e) { 
var pointer = e.target.result; 
if (pointer) { 
console. log(pointer. key + "with data:"); 
for(var field in pointer.value) { 
console. log(pointer. value[field]); 
} 
pointer. continue( ); 


用 











例子 15-5 是 一 个 建立 索引 的 代码 ,对 姓 进行 了 索引 ,应 ae 
用 预存 有 * 张 “ 王 " 两 个 姓 的 数据 ,通过 add 按钮 添加 新 数据 ， 例子 15-5: 
通过 read 按钮 快速 查询 输入 的 姓氏 。 part2/ch15/indexedDB-index. 
最 后 ,数据 库 使 用 完 后 ,需要 关闭 数据 库 。 通 过 在 打开 数 “时! 
据 库 时 获得 的 数据 库 对 象 db 来 完成 数据 库 的 关闭 ,如 下 代码 。 





db. close( ); 





而 删除 数据 库 就 直接 调用 IndexedDB 对 象 ,代码 如 下 。 





indexedDB. deleteDatabase(DBname) ; 











练习 


1. 例子 15-1 中 ,使 用 不 同 浏览 器 同时 打开 页 面 ,分 析 sessionStorage 会 话 存储 对 象 和 
localStorage 本 地 存储 对 象 ,关闭 页 面 重新 打开 ,看 看 状态 的 生命 周期 的 不 同 。 

2. 在 例子 15-4 的 indexDBstudent. html 代码 基础 上 ,已 经 做 了 一 个 名 字 的 索引 ,通过 

3. 通过 索引 检索 数据 有 两 种 方法 .一 种 是 index. get() , 另 一 种 是 index. openCursor() 
游标 的 方法 ,请 在 练习 2 中 分 别 使 用 这 两 个 方法 来 查询 学 生 的 名 字 , 分 析 他 们 的 区 别 。 
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离线 应 用 


16.1 离线 应 用 概述 


虽然 基于 Web 的 应 用 是 采用 B/S 架构 ,在 早期 的 Web 应 用 中 ,如 果 网 络 断 开 ,浏览 器 
只 能 显示 打 不 开 网 页 ,而 无 法 继续 运行 这 个 Web 应 用 。 但 是 ,基于 Web 的 应 用 中 ,HTML 
十 CSS 十 JavaScript 三 大 技术 的 文件 虽然 保存 在 服务 器 端 ,在 客户 端 发 出 请 求 时 ,服务 器 的 
工作 仅仅 是 传送 这 些 文件 到 客户 端 ,然后 由 浏览 器 端 运行 。 如 果 我 们 编写 的 一 些 Web 应 用 
系统 并 不 都 是 很 依赖 服务 器 端的 数据 ,那么 ,HTML、CSS 和 JavaScript 是 可 以 缓存 在 客户 
端 浏 览 器 里 的 。 在 没有 网 络 的 情况 下 ,也 可 以 运行 缓存 里 的 应 用 程序 (HTML 十 CSS 十 
JavaScript) ,访问 缓存 的 数据 ,例如 图 片 .本 地 数据 库 等 。 虽 然 ,浏览 器 有 自 带 的 缓存 
(Cache-Control 和 Last-Modified) 机 制 , 也 是 以 文件 为 单位 进行 缓存 ,并 有 一 定 更 新 机 制 ， 
但 是 ,HTML 5 Application Cache 为 我 们 提供 的 离线 缓存 应 用 技术 ,是 为 了 更 灵活 地 控制 
浏览 器 缓存 机 制 ,通过 代码 控制 离线 应 用 ,最 大 的 好 处 是 加 快 移动 Web 应 用 的 本 地 加 载 ,对 
一 些 静 态 文件 ,在 没有 文件 更 新 时 ,减少 对 服务 器 的 请 求 。 


16.2 离线 应 用 原理 


通过 设置 缓存 文件 列表 来 实现 离线 Web 应 用 ,其 原理 如 图 16-1 所 示 ,不管 是 离线 或 在 
线 , 浏 览 器 总 是 首先 访问 缓存 文件 ,没有 缓存 的 文件 ,会 向 服务 器 发 送 请 求 ,同时 ,浏览 器 会 
检查 缓存 的 更 新 ,在 在 线 状 况 下 向 服务 器 发 出 更 新 请 求 。 

离线 应 用 也 存在 以 下 问题 。 

(1) 含有 manifest 属性 的 页 面 默认 为 缓存 文件 。 

(2) 缓存 文件 的 更 新 不 是 服务 器 主动 更 新 ,是 依赖 manifest 文件 的 更 新 。 所 以 ,缓存 的 
更 新 要 两 次 服务 器 请 求 才 能 完成 ,第 一 次 是 下 载 manifest 更 新 的 文件 ,第 二 次 才 更 新 缓存 
列表 文件 。 




















第 16 章 ”离线 应 | 
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图 16-1 离线 应 用 原理 


(3) 更 新 缓存 文件 是 整个 列表 里 的 文件 ,不 能 单独 更 新 某 个 文件 。 但 是 ,没有 变化 的 文 
件 请 求 依旧 是 304 响应 ,真正 更 新 过 的 资源 文件 是 200 响应 。 所 以 ,也 不 用 担心 耗费 带宽 下 
载 没 有 变化 的 文件 。 

(4) 对 于 一 个 缓存 文件 ,如 果 它 的 URL 链接 参数 发 生变 化 ,例如 缓存 文件 page. html， 
当 用 page. html? name 一 1 打开 页 面 时 ,会 被 认为 是 不 同文 件 ,而 不 会 访问 缓存 文件 page. 
html。 甚 至 page. html? name 一 1 会 当成 新 文件 进行 缓存 ,增加 存储 开销 。 

(5) 由 于 浏览 器 先 访问 缓存 文件 ,服务 器 端 访 客 统计 方面 的 设计 要 忽略 缓存 文件 的 访 
问 统计 数 。 


16.3 创建 缓存 清单 

首先 创建 一 个 缓存 文件 ,文件 的 扩展 名 是 . manifest。 在 这 个 文件 里 面 写 入 缓存 文件 列 
表 , 可 以 是 HTML 图片. CSS JavaScript 文件 ,在 需要 缓存 的 HTML 页 面 中 加 入 缓存 文 
件 , 代 码 如 下 。 





< html manifest = offline. manifest > 











编写 缓存 清单 ,缓存 文件 有 自己 的 固定 格式 , 见 表 16-1。 
表 16-1 缓存 文件 格式 
































文件 格式 说 明 
CACHE MANIFEST 第 一 行 必 须 写 的 语法 
# 井 2016. 10. 3v1.0 注释 ,修改 注释 可 以 激活 缓存 更 新 
CACHE: 可 以 缓存 的 文件 
f1. HTML f2. HTML 文件 名 单 
NETWORK: 必须 在 线 的 文件 (不 能 缓存 ) 
f3. HTML 文件 名 单 
FALLBACK: 如 果 处 于 离线 状态 ,又 定义 了 network 文件 清单 ,可 以 显示 这 里 的 文件 
/index. html /f4. html 表示 Web 服务 器 根 目录 下 的 文件 ,离线 时 可 以 替代 的 文件 





其 中 ,CACHE 可 以 省 略 , 直接 在 CACHE MANIFEST 下 面 写 需 要 缓存 的 文件 ,在 第 
一 次 访问 服务 器 时 ,浏览 器 会 将 指明 的 文件 缓存 到 本 地 。 在 NETWORK 之 下 的 文件 ,是 必 
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须 强 制 通过 网 络 资源 获取 的 。 在 FALLBACK 下 指明 文件 .是 一 种 失败 的 回调 方案 ,比如 
index. php 无 法 访问 时 ,可 以 用 f4. html 替代 index. html 的 请 求 。 


16.4 离线 应 用 事件 与 缓存 更 新 


Navigator 浏览 器 API 通过 下 面 的 代码 可 以 检测 离线 状态 ,返回 “true” 或 “false”。 





window. navigator. online; 





或 者 是 加 入 监听 事件 来 控制 离线 应 用 ,代码 如 下 。 





window. addEventListener("online", function(e){log("Online");},true); 











更 多 的 离线 事件 见 表 16-2。 

















表 16-2 离线 事件 
离线 事件 说 明 
checking 浏览 器 发 现 < html > 的 manifest 属性 ,事件 激活 
downloading 如 果 缓 存 清单 没有 下 载 过 ,事件 激活 
progress 缓存 文件 下 载 过 程 中 ,事件 激活 ,可 以 显示 已 下 载 和 等 待 下 载 文件 数 
cashed 缓存 文件 下 载 完毕 ,事件 激活 
i 浏览 器 每 次 打开 页 面 都 检测 缓存 清单 是 否 被 修改 :“ 没 有 ”, 事 件 激活 ; 
“有 ”, 分 别 激活 doawloading .progess ,updateready 
updateready 缓存 文件 更 新 完毕 后 ,事件 激活 








浏览 器 在 首次 加 载 HTML 文件 时 ,会 解析 < html > 的 manifest 属性 ,并 读 取 manifest 
文件 ,获取 CACHE 下 的 缓存 文件 列表 ,进行 文件 缓存 。 缓 存 文件 的 更 新 机 制 是 由 manifest 
文件 的 时 间 戳 决定 的 ,而 manifest 文件 本 身 不 能 被 自己 缓存 ,manifest 文件 是 通过 浏览 器 绥 
存 机 制 来 完成 更 新 的 。 当 缓存 列表 文件 有 更 新 时 ,必须 要 同时 修改 manifest 文件 。 其 实 ， 
只 要 在 manifest 文件 中 略为 变动 ,例如 ,修改 并 注释 内 容 、 保 存 文件 生成 新 的 时 间 戳 。 在 浏 
览 器 加 载 或 刷新 网 页 时 ,首先 会 检查 manifest 的 更 新 情况 ,来 决定 是 否 重新 加 载 所 有 缓存 
列表 里 的 文件 ,不 管 列表 里 文件 是 否 有 变动 。 

离线 缓存 的 更 新 还 可 以 通过 JavaScript 的 API 接口 window. applicationCache. update( ) 强 
制 更 新 浏览 器 端 缓存 文件 。 也 可 以 手动 清除 浏览 器 的 缓存 设置 来 达到 缓存 文件 更 新 的 
目的 。 


16.5 ”Web 服务 器 设置 


通过 例子 16-1 测试 离线 应 用 ,首先 要 对 Web 服务 器 进行 设置 。 大 多 数 Web 服务 器 是 
Apache 服务 器 ,在 Apache 服务 器 的 www 根 目录 下 ,每 一 个 网 站 都 有 一 个 . htaccess 文件 ， 
将 缓存 文件 类 型 MIME 加 入 到 该 文件 中 : 
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RddTYpe text/cache - manifest .manifest 





或 者 ,在 Apache 服务 器 中 设置 参数 文件 web. xml 加 入 : 





= 
<mime— mapping > 例子 16-1: 

Ee > manifest SE > OEhT 6 cacbeapp. heal 
<mime— type> text/cache — manifest </mime — type> 和 


</mime — mapping> 














在 做 离线 应 用 测试 时 ,将 服务 器 关闭 ,在 浏览 器 的 设置 里 把 缓存 清除 ,修改 缓存 清单 文 
件 , 将 qq_logo. png、test. js 放 到 缓存 CACHE 下 ,再 打开 浏览 器 访问 离线 应 用 。 通 过 
Chrome 浏览 器 的 开发 者 模式 ,可 以 在 Resource 下 查看 Application Cache 的 情况 。 具 体 实 
验 见 第 31 章 离线 应 用 实验 。 

















练习 


1. 给 例子 16-1 加 上 online 在 线 状 态 检查 。 如 果 在 线 ,执行 window. applicationCache. 
update() 强 制 更 新 ,否则 弹出 信息 通知 用 户 现在 是 离线 状态 。 

2. 浏览 器 已 经 有 了 缓存 机 制 ,为 什么 还 使 用 HTML 5 的 离线 应 用 缓存 技术 ? 请 修改 
例子 16-1, 删 除 manifest 缓存 文件 ,用 浏览 器 的 开发 者 工具 分 析 浏 览 器 缓存 机 制 和 HTML 5 
离线 缓存 机 制 的 区 别 。 
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WebSocket 通 信 与 Workers 多 线程 


17.1 Web 通信 

Web 是 以 HTTP 为 通信 协议 ,在 B/S 构架 下 的 浏览 器 与 服务 器 通信 ,如 图 17-1 所 示 。 
通信 的 建立 过 程 是 浏览 器 发 出 请 求 ,服务器 响应 ,通信 结束 。 服 务 器 永远 处 于 被 动 状态 。 如 
果 服 务 器 端 有 实时 数据 变化 ,浏览 器 不 发 出 请 求 , 这 些 数据 是 不 会 马上 发 给 浏览 器 端的 。 只 
有 通过 轮 询 机 制 ,才能 满足 实时 数据 的 传送 。 


发 出 HTTP 请 求 













返回 HTML 页 面 文件 
AJAX 发 出 HTTP 请 求 






返回 数据 文件 


17-1 Web 的 HTTP 通信 方式 


17.2 WebSocket 通信 方式 


HTTP 的 通信 方式 ,每 次 都 要 建立 握手 机 制 来 完成 一 次 请 求 、 响 应 服务 ,通信 和 是 一 种 单 
向 行为 ,如 果 用 来 做 实时 通信 ,效率 低 , 而 且 每 一 次 通信 的 请 求 ,响应 服务 结束 是 无 状态 记录 
的 。Socket 是 在 TCP/IP 的 应 用 层 上 再 设计 出 一 个 中 间 软 件 抽 象 层 ,在 设计 模式 中 ,Socket 
相当 于 一 个 门面 模式 ,用 Socket 通信 协议 接口 隐藏 复杂 的 TCP/IP。 最 重要 的 是 Socket 通 
信和 实现 了 实时 双向 ,Socket 建立 一 次 握手 ,形成 一 个 实时 通信 通道 ,来 完成 双向 数据 传输 。 
实现 服务 器 的 推送 机 制 , 也 就 是 说 服务 器 在 有 新 数据 时 ,马上 可 以 主动 推送 给 浏览 器 ,而 无 
须 等 待 浏览 器 请 求 。 很 多 高 级 语言 都 使 用 Socket 协议 来 建立 两 台 计 算 机 之 间 的 通信 , 例 
如 ,Java、C++ ,PHP。 但 是 这 种 通信 机 制 主要 用 于 基于 C/S 架构 的 应 用 ,即使 应 用 在 B/S 架 
构 ,也 都 是 通过 服务 器 端的 编程 运行 的 应 用 .例如 PHPSocketAPI。 
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HTML 5 的 WebSocket API 是 纯粹 地 基于 B/S 的 架构 ,给 JavaScript 增加 的 Socket 
通信 功能 ,而 且 是 在 客户 端的 编程 。 

HTML 5 的 WebSocket 通信 协议 实现 了 客户 端 浏览 器 的 Socket 通信 方式 ,通信 一 旦 建 
立 , 主 机 ,客户 机 可 以 双向 实时 向 对 方 发 送 数 据 ,只 有 关闭 通道 ,通信 才 停 止 ,如 图 17-2 所 示 。 


Socket 实 时 双向 通道 
浏览 器“ 一 >》( 服 务 器 


图 17-2 ”Socket 的 通信 方式 





17.3 专用 的 WebSocket 服务 器 


HTML 5 的 WebSocket API 仅 提供 了 客户 端的 JavaScript 接口 。 服 务 器 端 还 没有 相 
应 的 API 标准 ,服务 器 端的 Socket 服务 还 是 需要 不 同 的 其 他 计算 机 语言 完成 ,例如 ,PHP、 
Java、 Python 和 现在 流行 的 Node. js 等 ,部 分 实现 WebSocket 服务 器 端 编码 接口 的 , 见 
表 17-1。 

表 17-1 WebSocket 的 服务 器 端 实 现 
服务 下 载 语言 说 明 
http://code. google. com/phpWebsocket/ PHP 简单 的 PHP 语言 编写 服务 器 端 
http://code. google. com/p/pyWebsocket/ | Python Apache Web 服务 器 的 Socket 功能 扩展 


Node. js 十 socket. io 提供 了 客户 端 和 服务 器 端 
统一 接口 











http://socket. io/ Node. js 








17.4 WebSocket 客户 端 编程 


前 面 提 到 ,服务 器 端 可 以 用 多 种 语言 实现 WebSocket 编程 ,客户 端 除了 采用 HTML 5 
的 WebSocket API 标准 ,还 可 以 采用 很 多 基于 HTML 5 的 
WebSocket API 上 开发 的 第 三 方 的 API, 如 socket. io API 编 。 人 鲍 子 17-1: 
写 客户 端 代 码 。 下 面 采用 的 是 HTML 5 的 标准 接口 实现 的 part2/eh17/websockettest. 
客户 端 编程 ,客户 端 用 JavaScript 实现 , 见 例子 17-1。 首 先 创 ae 
建 一 个 WebSocket 对 象 与 服务 器 建立 连接 ,如 下 。 








var url = "ws://localhost:8080 /"; 
Var websocket = new webSocket (url) 











注意 ,创建 WebSocket 对 象 , 参 数 url 是 ws:// 协 议 , 不 是 http://, 这 是 一 个 异步 通信 
过 程 ,通过 异步 通信 事件 驱动 回调 函数 完成 不 同 任务 。 事 件 见 表 17-2。 

在 消息 接收 方面 ,onmessage 事件 提供 了 一 个 data 属性 , 它 包含 消息 的 内 容 部 分 ,由 字 
符 串 组 成 ,要 想 传 递 不 同 的 数据 类 型 ,可 以 通过 序列 化 / 反 序列 化 操作 ,实现 更 多 的 数据 
传递 。 
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表 17-2 WebSocket 事件 




















WebSocket 事件 说 明 
onopen Socket 打开 连接 ,通过 websocket. send() 发 送 消息 
onclose Socket 断 开 连 接 , websocket. close() 关 闭 连接 
onmessage 客户 端 收 到 消息 event. data 
onerror Socket 发 生 错误 





17.5 Workers 多 线程 编程 


在 许多 计算 机 高 级 语言 中 ,多 线程 的 机 制 已 经 是 最 基本 的 功能 。 随 着 Web 应 用 的 流 
行 , 在 客户 端 ,大 量 事件 是 由 单线 程控 制 处 理 来 完成 已 经 不 适合 互联 网 的 发 展 需求 。 为 了 解 
决 多 并 发 的 应 用 ,开发 人 员 不 得 不 采用 轮 询 ( 使 用 setTimeout(),setInterval())、 异 步调 用 
(AJAX 的 XMLHttpRequest) 来 实现 并 发 处 理 。 然 而 ,尽管 这 些 通过 异步 调用 的 技巧 来 解 
决 并 发 问题 ,但 并 没有 充分 利用 多 核 CPU 的 资源 。 

HTML 5 给 JavaScript 赋予 了 多 线程 机 制 API, 让 Web 应 用 的 编程 几乎 可 以 和 Java 
等 强大 的 应 用 相提并论 了 。 线 程 就 是 在 后 台 运 行 的 一 段 程序 代码 ,线程 可 以 让 JavaScript 
代码 实时 运行 于 后 台 , 可 以 让 多 个 JavaScript 线程 程序 同时 处 理 不 同 的 信息 。 多 线程 机 制 
是 由 一 个 主 控 程 序 , 创 建 一 个 或 多 个 并 发 运行 的 子 程序 一 起 进行 协同 工作 ,通过 异步 消息 传 
递 机 制 ,也 就 是 发 送 消息 (数据 ) 和 接收 消息 (数据 ) 来 控制 分 配 任 务 。JavaScript 的 多 线程 
原理 如 图 17-3 所 示 。 





var worker=new workers(“workerjs”) 
一 | 
































| _ 创建 子 线程 | 子 线程 
人 PostMessage("message”):; -| 程序 
相互 发 信息 















收 到 信息 事件 





图 17-3 Workers 多 线程 机 制 


17.6 Workers 的 编程 实现 


JavaScript 多 线程 编程 分 为 两 个 部 分 ,一 个 是 主 控 程序 ,一 个 是 子 线程 程序 ,分 别 是 独 
立 的 两 个 程序 。 

主 控 程 序 编程 是 把 相对 独立 的 一 段 代 码 编写 成 外 部 JS 
文件 ,例如 worker. js, 通 过 new workers("worker. js") 构 造 ”例子 17-2: 
函数 创建 一 个 线程 对 象 worker。 这 个 对 象 有 以 下 两 个 事件 Part2/ch17/cale. html 
属性 。 

(1) onerror: 当 worker 运行 出 现 错误 时 捕获 。 

(2) onmessage: 当 worker 接收 到 主线 程 发 送 消 息 时 捕获 。 

onmessage 的 回调 函数 中 ,通过 event. data 获得 消息 或 数据 , 它 与 前 面 提 到 的 
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WebSocket 的 回调 函数 里 的 event. data 返回 的 数据 类 型 不 仅 是 字符 串 , 它 可 以 是 
JavaScript 的 任何 数据 类 型 ,例如 ,JSON 数据 。 

Worker 对 象 有 以 下 两 个 方法 。 

(1) postMessage() : 主 控 程 序 向 线程 发 送 消息 ,这 个 方法 不 仅 发 送 字符 串 消息 ,而 且 支 
持 所 有 JavaScript 原生 数据 类 型 的 传送 。 

(2) terminate() : 在 主 控 程 序 端 终止 worker 执行 。 

子 线程 的 编程 思路 是 通过 this 或 self 自身 对 象 来 绑 定 事件 和 方法 ,例如 , 子 线程 通过 下 
面 的 代码 获取 主 控 程 序 发 来 的 数据 。 





this. onmessage = function (event) { 
var data = event. data;} 











子 线程 调用 postMessage() 给 主 控 程序 发 送 数据 , 子 线程 可 以 通过 close() 方 法 自己 关 
闭 线程 ,这 与 主 控 程 序 的 terminate() 关 闭 一 个 子 线程 一 样 。 代 码 如 下 。 





self. postMessage( result); 
self. close(); 











具体 演示 见 例 了 17-2。 


17.7 Workers 编程 注意 事项 


Web Workers 是 运行 在 一 个 严格 的 无 DOM 访问 的 环境 里 ,因为 DOM 是 非 线程 安全 
的 。 想 想 看 ,如 果 众 多 线程 都 去 修改 同一 个 HTML 元 素 属性 , 那 是 难以 预防 的 ,所 以 , 子 线 
程 要 把 结果 传递 回 主 控 程 序 , 通 过 主 控 程 序 操作 DOM 来 更 新 HTML 页 面 。Workers 线程 
的 编程 会 有 更 多 限制 ,如 下 。 

(1) 不 可 以 访问 window、document、console 和 父 对 象 。 

(2) 主 控 程序 传递 的 消息 是 复制 的 ,线程 不 可 以 直接 修改 ,但 是 ,可 以 访问 JavaScript 
的 全 局 对 象 JSON ,Date()、Array。 

(3) 在 主 控 程 序 中 用 线程 对 象 worker. onmessage 监控 线程 的 消息 事件 ,而 在 worker 
线程 内 部 用 self 自身 引用 或 this. onmessage 监控 来 自主 控 程序 的 消息 。 

(4) 可 以 通过 只 读 访问 location ,navigator、XMLHttpRequest 和 localStorge 对 象 。 

(5) 可 以 使 用 setTimeout() ,setInterval() ,addEventListener() 和 removeEventListener()。 

(6) worker 必须 遵守 同 源 策略 (same-origin policy) , 同 源 策略 也 要 求 端口 必须 一 致 。 

















练习 
修改 例子 17-1, 用 Workers 多 线程 方式 ,模拟 不 同 用 户 访问 WebSocket 服务 器 。 
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HTML 5 从 根本 上 改变 了 开发 Web 应 用 的 方式 ,从 桌面 浏览 
器 演化 到 移动 应 用 ,HTML 5 就 是 为 移动 应 用 而 生 的 。 这 个 语言 
和 标准 正在 取代 原生 移动 应 用 的 开发 模式 ,将 继续 影响 着 各 种 操 
作 系统 平台 (Android,iOS) 的 应 用 开发 。 

在 移动 应 用 领域 ,原生 应 用 一 直 占 领 着 主要 的 应 用 市 场 , 而 
随 着 HTML 5 标准 的 发 展 和 移动 设备 硬件 的 不 断 提升 ,及 云 计算 
的 成 熟 ,两 者 之 间 的 差异 已 经 逐渐 变 得 模糊 。 今 天 ,HTML 5 最 令 
人 激动 的 革新 是 硬件 设备 访问 能 力 ,这 是 消除 移动 Web 应 用 与 原 
生 应 用 界限 的 最 大 障碍 。 

HTML 5 的 Geolocation API 可 轻易 地 实现 地 理 定位 编程 ， 
Camera API 让 浏览 器 端 直接 访问 移动 设备 和 台式 机 的 摄像 头 , 更 
多 的 应 用 比如 电池 状态 .通讯 录 、 日 历 . 加 速 器 等 都 可 以 通过 第 三 
方 的 API, 例 如 React Native、PhoneGap/Cordova 等 达到 和 实现 与 
移动 原生 应 用 的 功能 。 

今天 ,利用 HTML 5 实现 移动 应 用 开发 的 框架 如 雨后春笋 层 
出 不 穷 ,在 本 篇 中 ,根据 移动 设备 的 特点 ,学 习 HTML 5 的 地 理 位 
置信 息 .摄像 头 .Device Orientation 和 Screen Orientation 接口 ,还 
介绍 响应 式 设计 和 Bootstrap 框架 ,UI 设计 的 概念 和 利用 jquery 
mobile 框架 做 UI 设计 ,学 习 PhoneGap/Cordova 混杂 式 Hybrid 
web 开发 ,打包 编译 成 原生 应 用 ,最 后 ,介绍 了 简单 的 移动 Web 
应 用 测试 工具 和 方法 。 


工 欲 善 其 事 , 必 先 利 其 器 





Web 移 动 应 用 新 领域 


18.1 Web 移动 应 用 的 发 展 概况 


早期 的 功能 手机 是 单 任务 系统 ,在 互联 网 应 用 方面 , 仅 提供 电子 邮件 工具 ,及 一 个 简单 
的 浏览 器 ,但 是 ,桌面 的 Web 网 页 是 无 法 在 手机 浏览 器 里 很 好 地 显示 的 ,所 以 ,手机 用 户 几 
乎 不 可 以 ,也 不 愿意 使 用 手机 浏览 器 查阅 网 页 内 容 。 因 此 ,研究 人 员 开 始 提出 针对 移动 
Web 的 设计 规则 。 

由 于 移动 通信 的 特点 ,手机 上 网 的 网 速 和 通信 协议 有 关 , 第 一 个 针对 手机 的 上 网 协议 由 
移动 厂家 爱立信 (Ericsson) .诺基亚 (Nokia) .摩托 罗拉 (Motorola) 等 通信 业 巨 头 在 1997 年 
提出 , 即 WAP(Wireless Application Protocol ,无 线 应 用 协议 ) ,这 是 一 个 开放 式 标 准 协议 ， 
其 目的 是 通过 移动 网 络 GSM .GPRS.CDMA TDMA 3G 等 移动 通信 协议 把 网 页 信息 传送 
到 移动 电话 或 其 他 移动 通信 设备 上 。 

同时 ,通过 WAP 代理 服务 器 把 HTML 网 页 转换 成 WML( Wireless Markup Language, 无 
线 标记 语言 ) 的 网 页 ,针对 手持 设备 内 存 小 和 CPU 的 限制 ,采用 类 似 于 JavaScript 的 
WMLScript, 手 机 通过 WAP 浏览 器 可 以 访问 WML 构成 的 WAP 手机 网 站 ,实现 手机 无 线 上 
网 。 由 于 早期 手机 硬件 和 移动 上 网 速度 的 限制 ,通过 WAP 访问 互联 网 及 网 站 并 没有 得 到 广 
泛 的 应 用 ,应 用 较 多 的 是 收发 电子 邮件 .天 气 和 股票 信息 。WAP 的 发 展 历史 见 表 18-1。 

表 18-1 WAP 的 发 展 史 














时 间 移动 Web 应 用 说 明 
1997 年 7 月 WAP 标准 出 炉 WAP 论坛 发 起 

1998 年 5 月 WAP 1.0 WML1.0 

1999 年 5 月 WAP1.1 





采用 最 新 的 Internet 标准 和 协议 XHTML MP (Mobile 


WwW. 沁 
2001 年 8 月 E20 Profile) ,支持 对 WML 1.0 的 完全 向 后 兼容 
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直到 2007 年 ,第 一 代 iPhone 上 市 , 它 的 硬件 已 经 和 台式 计算 机 接近 ,3G 移动 网 络 技术 
的 带宽 已 经 足以 让 手机 打开 网 页 的 速度 接近 桌面 计算 机 。 并 且 ,Apple 公司 的 iPhone 浏览 
器 支持 HTML 5, 并 鼓励 用 户 用 iPhone 访问 桌面 的 Web 网 站 。 今 天 ,我们 所 用 的 智能 手机 
已 经 不 再 支持 WML 编写 的 网 站 ,而 是 回归 到 HTML 构建 的 网 站 。 

HTML 5 的 新 特性 让 浏览 器 厂家 开始 采用 HTML 5 的 技术 支持 ,特别 是 在 移动 应 用 
领域 ,HTML 5 和 CSS 3 标准 让 移动 Web 应 用 百花 齐 放 ,各 种 基于 HTML 5 的 移动 应 用 框 
架 层出不穷 ,甚至 有 取代 移动 原生 (Native) 应 用 的 趋势 。 


18.2 移动 App 与 桌面 App 


Web 开发 最 早 的 概念 就 是 网 站 开发 ,但 是 ,智能 手机 、 移 动 设备 出 现 以 后 ,HTML 5 应 
运 而 生 , Web 应 用 已 经 不 是 简单 的 网 站 了 ,今天 人 们 用 得 最 多 的 、 最 成 功 的 应 用 就 是 网 上 银 
行 。 打 开 银 行 网 站 ,登录 后 就 可 以 完成 账户 查询 、 转 账 等 功能 。 而 台式 计算 机 的 网 上 银行 和 
手机 的 网 上 银行 在 功能 上 已 经 一 样 ,但 是 操作 界面 有 所 不 同 。 首 先 看 看 它们 在 硬件 方面 的 
不 同 点 , 见 表 18-2。 














表 18-2 移动 与 桌面 设备 的 特点 比较 
































特 点 移 动 桌面 说 明 
屏幕 大 小 小 大 手机 的 最 小 屏幕 是 3. 5 英寸 
240 一 1920px, 视网膜 村 手机 和 桌面 显示 器 分 辩 率 已 经 接近 ， 
分 辩 率 屏 ,2k 1024 一 2096px,2k,4k 但 是 还 是 受 物理 尺寸 制约 
现在 的 笔记 本 和 平板 电脑 开始 合 二 
触摸 屏 有 无 为 一 ,Window 10 系统 已 经 内 置 触摸 
屏 功 能 
随 着 CPU 的 强大 ,台式 计算 机 越 做 
屏幕 与 设备 连接 | 一 体 机 分 离 或 一 体 机 越 小 ,一 体 机 流行 
台式 计算 机 可 以 通过 IP 地 址 进行 地 
位 置 检测 GPS | 有 无 理 定位 
hide 1oT 物 联网 有 可 能 会 让 台式 计算 机 连 
(重力 ,光线 ,距离 ,| 有 无 接 各 种 传感器 
电子 罗盘 ,陀螺 仪 ) 
摄像 头 前 后 两 个 摄像 头 基本 没有 台式 计算 机 可 以 加 装 摄像 头 
手机 等 移动 设备 可 以 通过 蓝牙 .USB 
键盘 虚拟 键盘 物理 键盘 连接 物理 键盘 
鼠标 无 有 ee 连接 
每 个 移动 操作 系统 有 | ，、 移动 浏览 器 和 桌面 浏览 器 在 功能 上 
浏览 器 默认 浏览 器 可 以 安装 不 同 的 浏览 器 有 很 大 区 别 





Ubuntu 于 2015 年 发 布 移动 版 ， 
Firefox OS 和 Google 的 Chrome OS 
移动 操作 系统 在 2015 年 年 底 都 停止 
开发 了 


硬件 ARM 架构 CPU Intel x86 架构 CPU Intelx 86 也 开始 应 用 于 平板 电脑 


Android,iOS, Windows 
操作 系统 Mobile, Firefox OS,|Windows,Linux, OS X 
Chrome OS 
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18.3 Web App 与 Native App 


在 移动 应 用 中 ,大 多 数 是 以 原生 应 用 为 主 ,Android 系统 的 应 用 开发 语言 是 Java, 芋 果 
iOS 系统 的 应 用 开发 语言 是 Objective<C。2014 年 ,Apple 公司 在 C 和 Objective-C 基础 上 ， 
发 布 新 的 编程 语言 Swift, 用 来 编写 OS X 和 iOS 应 用 程序 ,微软 移动 应 用 Window Mobile 
系统 用 的 是 C# /C++ 编程 语言 。 所 以 ,开发 一 个 应 用 在 三 个 不 同系 统 下 运行 ,需要 软件 工 
程 师 学 习 三 种 不 同 的 语言 ,学习 成 本 和 难度 可 想 而 知 ,而 且 还 要 学 习 不 同 的 开发 工具 ,例如 ， 
iOS 的 Xcode、 微 软 的 Visual Studio、Android Studio。 而 Web 应 用 主要 是 基于 HTML 十 
CSS 十 JavaScript, 学 习 简 单 多 了 ,入 门 容 易 , 学 习 曲 线 也 比较 平滑 ,开发 工具 多 样 化 ,从 简单 
的 代码 编辑 器 如 Notepad 十 十 ,到 功能 强大 的 Eclipse。 随 着 HTML 5 标准 的 实施 ,HTML 5 的 
应 用 开始 得 到 关注 。 

Web App 和 Native App 的 主要 区 别 如 下 。 

(1) Web App 运行 于 浏览 器 ,B/S 架构 ; 原生 App 运行 于 操作 系统 ,C/S 架构 。 






























































(2) 原生 App 依赖 于 SDK 开发 包 开 发 ,例如 ， 

iPhone SDK、Android SDK 及 复杂 的 开发 环境 措 

建 ，Web 应 用 的 开发 环境 相对 简单 ,选择 的 开发 工 ~ 

具 也 多 。 HIML+CSS+]| B/S Web 服 务 器 

JavaScript PHPJSPRuby,ASP| 

(3) 原生 App 的 升级 受 操 作 系统 版 本 的 影 

响 ,Web App 可 以 随时 随地 在 线 升 级 。 cs 二 应 用 肝 多 当 
(4) 原生 应 用 需要 到 应 用 商店 下 载 安装 , 而 原生 ES 

Web 应 用 无 须 下 载 安装 。 
(5) Web 应 用 跨 平台 ,一 次 开发 ,不 同 平台 操 || obissivec 

作 系 统 可 以 直接 运行 。 





Web 应 用 及 原生 应 用 的 运行 环境 区 别 如 图 18-1 Web App 与 Native App 的 结构 
图 18-1 所 示 。 


18.4 移动 Web 开发 设计 方法 及 优化 


移动 原生 App 的 开发 ,可 以 是 单机 版 的 应 用 ,例如 ,一 个 通过 摄像 头 拍照 的 应 用 、 一 个 
美化 照片 的 应 用 都 可 以 独立 地 安装 到 移动 设备 中 ,而 不 需要 网 络 和 服务 器 支持 。 但 是 ,移动 
Web 开发 ,即使 是 所 有 功能 都 可 以 在 客户 端 实现 , 它 的 应 用 系统 永远 是 在 B/S 环境 下 运行 ， 
即使 是 在 无 网 络 环境 下 的 离线 应 用 。 

所 以 ,移动 Web 开发 模式 又 分 为 客户 端 开发 和 服务 器 端 开 发 。 当 然 ,客户 端 开 发 语言 
是 基于 HTML 十 CSS 十 JavaScript, 如 果 所 有 的 功能 都 可 以 在 客户 端 完成 ,无 须 服务 器 端 进 
行 数据 处 理 和 数据 库 访问 , 则 结合 WWW 服务 器 就 可 以 完成 一 个 Web 应 用 的 开发 ,无 须 再 
学 习 其 他 开发 语言 。 如 果 服 务 器 端 需要 数据 操作 , 则 需要 服务 器 端的 脚本 语言 来 完成 一 个 
Web 的 应 用 服务 。 服 务 器 端 开发 语言 百花 齐 放 , 有 早期 最 流行 的 PHP 和 Perl, 及 重量 级 的 
基于 Java 的 JSP 和 微软 的 . NET 平台 , 随 着 云 计算 和 大 数据 技术 的 发 展 ,Ruby 和 Python 
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开始 占 主 导 地 位 。 为 了 减少 计算 机 语言 的 学 习 曲 线 , 以 及 发 挥 Web 跨 平台 的 应 用 优势 ,一 
种 基于 JavaScript 的 服务 器 端 开发 框架 诞生 了 ,这 就 是 Node.js。 由 于 服务 器 端 和 客户 端 采 
用 统一 的 脚本 语言 JavaScript, 因 此 一 个 基于 JavaScript 的 全 栈 开 发 也 开始 流行 了 。 


18.4.1 前 端 开发 模式 


移动 Web 应 用 开发 方法 更 强调 前 端 开 发 ,而 基于 客户 端 开 发 的 模式 更 强调 移动 布局 和 
UI 设计 ,在 这 一 领域 出 现 了 很 多 的 开发 框架 和 开发 库 , 很 多 都 是 基于 HTML 5 开发 出 来 的 
框架 。 几 个 著名 的 前 端 框架 和 库 如 下 。 

(1) jQuery Mobile: 是 从 流行 的 jQuery 开发 库 演化 出 来 的 针对 移动 Web App 开发 的 
版 本 。 

(2) Sencha Touch: 提供 丰富 的 模仿 原生 App 开发 组 件 , UI 更 像 是 用 原生 API 开 

(3) Vue.js: 2018 年 最 火 的 前 端 开发 框架 ,是 开发 用 户 界面 的 渐进 式 框架 ,采用 自 底 向 
上 增 量 开发 的 设计 ,通过 组 合 的 视图 组 件 实现 MVVM 数据 绑 定 响 应 。 


18.4.2 后 端 开发 模式 


其 实 ,大 多 数 移动 Web 应 用 更 多 的 开发 是 基于 前 端的 ,虽然 一 个 完整 的 Web 应 用 还 需 
要 Web 服务 器 支持 ,但 是 ,并 不 一 定 需 要 服务 器 端 编程 。 对 于 一 些 较 大 型 的 项 目 , 需 要 有 后 
台数 据 库 支持 ,以 及 复杂 的 业务 处 理 , 那 么 ,就 要 引入 第 三 方 基于 服务 器 端的 开发 语言 ,例如 
PHP、Python、Ruby、JSP、ASP 和 后 起 之 秀 NodeJS: 一 种 基于 JavaScript 的 服务 器 端 编 程 
语言 。 与 前 端 开发 一 样 ,后 端 开发 也 采取 框架 开发 模式 ,例如 Java EE 的 Struts 2、Spring、 
Hibernate 框架 、Ruby on Rails 和 Python 的 Django Web 框架 等 。 下 面 简单 介绍 PHP 和 
NodeJS 的 后 端 开 发 计算 机 语言 。 

(1) PHP 是 老牌 的 网 站 开发 语言 ,几乎 所 有 有 开发 网 站 经 验 的 程序 员 都 知道 PHP, 但 
是 , 随 着 Web 从 网 站 向 应 用 级 发 展 ,PHP 这 种 结构 松散 的 开发 模式 有 点 力不从心 了 ,在 
PHP5 版 本 以 后 ,开始 引入 框架 开发 模式 : Laravel、.CakePHP、Symfony 框架 等 ,并 且 能 与 移 
动 前 端 开 发 框架 完美 结合 。 

(2) NodeJS ,前 端 后 端 使 用 同一 种 语言 JavaScript, 模 块 化 开发 ,有 丰富 的 Web 开发 模 
块 支持 和 强大 的 生态 圈 ,流行 的 模块 有 : Kiss. js 使 用 Django 风格 的 模板 ,Sails 类 似 Ruby 
on Rails 的 MVC 框架 ,Total. js 是 侧重 于 Web 页 面 /应 用 的 现代 框架 ,并 支持 MVC 架构 开 
发 。NodeJS 更 容易 培养 Web 全 栈 开 发 工程 师 。 


18.4.3 响应 式 Web 设计 


从 设计 方法 上 讲 , 响 应 式 Web 设计 (Responsive Web Design) 已 经 成 为 移动 Web 应 用 
的 基本 设计 思想 。 响 应 式 Web 设计 是 通过 流 式 布局 、 流 式 图 片 和 媒体 查询 等 结合 的 一 种 移 
动 设计 方法 ,是 根据 移动 设备 屏幕 大 小 来 自动 调整 页 面 内 容 的 展现 。 这 种 方法 的 出 现 , 解 决 
了 早期 移动 网 站 的 开发 方式 下 ,桌面 Web 系统 和 移动 Web 系统 分 开 开 发 的 局 面 。 例 如 ,如 
果 一 个 移动 用 户 通过 手机 打开 访问 你 的 网 站 (yourdomain. com) , 它 会 自动 导向 到 针对 移动 
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的 mobile. yourdomain. com 或 者 m. yourdomain. com 等 之 类 的 子 域名 。 这 种 基于 响应 式 
Web 设计 的 开发 框架 如 Bootstrap。 其 核心 主要 是 一 个 网 格 CSS 样式 框架 ,利用 Media 
Query 功能 实现 了 响应 式 布局 ,借助 jQuery 类 似 的 JS 框架 来 实现 AJAX 数据 交互 ,适合 做 
跨 设备 从 桌面 到 移动 的 响应 式 前 端 设计 。 


18.4.4 单 页 面 应 用 


早期 的 Web 应 用 仅 停留 于 网 站 开发 模式 ,提供 的 主要 功能 是 阅读 .论坛 . 博 客 和 百科 
等 ,设计 方法 也 是 多 页 (Multi-pages) 的 网 站 模式 。 而 真正 的 桌面 应 用 系统 使 用 固定 的 图 形 
用 户 界 面 (GUI 设计 模式 ,而 不 会 像 网 站 那样 有 页 面 的 切换 过 程 。 这 种 多 页 切换 方式 ,不 仅 
影响 Web 的 响应 速度 ,也 影响 了 用 户 的 交互 体验 。 想 想 看 ,用 浏览 器 的 “前 进 ” 按 钮 和 “后 
退 ? 按 钮 来 查找 一 个 页 面 内 容 的 局 面 。 当 HTML 5 标准 让 Web 应 用 可 以 和 桌面 应 用 相 提 
并 论 的 时 候 , 把 Web 应 用 回归 到 桌面 应 用 的 Single Page Application(SPA) 的 设计 方法 就 
被 提出 了 。 让 用 户 体验 的 Web 应 用 就 像 原 生 的 App 一 样 ,而 不 是 一 个 网 站 。 

SPA 的 设计 方法 不 仅 是 把 多 页 的 网 站 放 到 一 个 页 面 ,而 是 把 更 多 的 UI 设计 从 服务 器 
端 转移 到 日 益 强 大 的 客户 端 。SPA 的 设计 思路 来 源 于 AJAX 异步 通信 技术 ,把 UI 和 数据 
分 离 ,客户 端的 UI 就 是 固定 于 一 个 页 面 ,所 有 的 用 户 交 互 都 是 通过 数据 更 新 来 完成 ,而 不 
是 传递 整个 Web 页 面 。 最 知名 的 单 页 面 应 用 框架 是 BackBone. js 和 Angular.js。 

(1) Angular. js: 是 一 个 创建 于 2009 年 ,由 Google 负责 更 新 和 维护 的 开源 JavaScript 
框架 ,是 基于 MVC 的 前 端 架 构 , 通 过 自 定义 指令 简单 地 扩展 HTML 属性 ,使 得 数据 能 够 和 
页 面 元 素 进 行 双向 绑 定 ,实现 动态 更 新 。 

(2) backBone.js: 是 一 个 轻 量 级 的 MVC 框架 ,创建 于 2010 年 ,没有 自己 的 模板 ,需要 
第 三 方 插件 Underscore. js 和 jQuery 等 插件 一 起 工作 。 其 基本 概念 是 基于 模型 /集合 、 视 
图 .路 由 。BackBone.js 是 一 个 极 简 主 义 的 框架 ,得 益 于 体积 小 ,易学 习 。 


18.4.5 混合 式 应 用 


从 跨 平台 开发 角度 出 发 ,移动 应 用 的 另 一 个 领域 是 混合 式 (Hybrid App) 的 开发 ,主要 
设计 思想 是 基于 Web 技术 ,再 通过 第 三 方 提供 的 针对 不 同 移动 操作 系统 的 硬件 接口 完成 一 
个 移动 应 用 开发 ,并 提供 编译 工具 将 WebApp 转换 成 不 同 移动 操作 系统 的 原生 App。 这 方 
面 的 框架 有 以 下 几 个 。 

(1) PhoneGap (Cordora): PhoneGap 是 通过 HTML 5 实现 的 移动 App 开发 ， 
PhoneGap 的 开源 版 又 可 称 为 Cordova, 它 提供 了 比 HTML 5 更 多 的 手机 硬件 和 系统 级 接 
口 ,比如 定位 ,摄像 头 、 通 知 、 提 醒 、 联 系 人 、 罗 盘 等 。 并 可 以 通过 再 编译 ,生成 iOS、Android 
和 Windows Mobile 的 原生 App。 

(2) ReactNative: 是 Facebook 在 2013 年 发 布 的 移动 App 开发 平台 ,使 用 JSX 语法 ， 
与 Native 接口 混 编 来 支持 移动 功能 开发 ,同时 也 满足 各 端 开发 需求 ,但 是 需要 针对 iOS 和 
Android 开发 两 套 代 码 。 其 开发 理念 是 “Learn ouce,write anywhere!” 

(3) Ionic: 是 基于 Cordova 十 AngularJS 的 混合 式 开发 平台 ,可 以 真正 实现 “Develop 


once, deploy everywhere”, 
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18.4.6 移动 Web 开发 优化 


针对 移动 应 用 领域 的 Web 开发 ,提出 了 以 下 优化 的 策略 。 

(1) 尽量 采用 成 熟 的 Web 移动 应 用 开发 框架 , 它 可 以 解决 浏览 器 及 设备 兼容 问题 。 

(2) 采用 响应 式 设计 ,single column designs( 单 栏 设 计 ) 也 是 移动 布局 采用 的 策略 之 
一 ,考虑 到 平板 电脑 移动 设备 ,设计 也 不 要 超过 三 列 布局 。 

(3) 移动 Web 设计 中 ,应 避免 滚动 条 和 弹出 窗口 出 现 。 

(4) 通过 简洁 的 导航 和 大 小 适合 的 按钮 ,减少 单 击 次 数 。 

(5) 考虑 移动 流量 等 成 本 问题 ,如 何 减 少 过 大 的 图 片 .文本 和 多 媒体 控制 内 容 大 小 也 是 
移动 开发 优化 的 考虑 问题 。 

(6) 图 片 优化 上 ,一 些小 图 片 icon 之 类 的 UI, 可 以 将 图 片 转换 成 Base64 编码 ,或 者 采 
用 图 标 型 字体 来 代替 图 片 ,以 减少 网 络 请 求 。 

(7) 视频 方面 ,应 考虑 兼容 HTML 5 的 视频 播放 ,禁用 Flash 视频 。 

(8) 开启 硬件 加 速 优化 动画 效果 ,CSS 的 一 些 特效 需要 开启 GPU 加 速 ,需要 某 些 CSS 
规则 来 触发 。 

(9) 字体 设计 上 ,使 用 rem 替代 em 单位 。rem 是 CSS 3 新 增 的 一 个 单位 ,相对 于 
HTML 的 根 节点 的 em 而 不 是 相对 于 父 元 素 的 em 单位 。 

(10) 由 于 移动 设备 网 络 环境 的 不 稳定 性 ,设计 App 时 应 尽量 考虑 到 离线 和 在 线 两 种 
情况 。 


练习 


1. 试 着 用 手机 浏览 器 打开 www. baidu. com 和 www. 163. com, 发 现 URL 地 址 分 别 会 
自动 切换 到 m. baidu. com 和 3g. 164. com, 在 台式 计算 机 浏览 器 中 打开 百度 和 163 首页 , 比 
较 和 手机 首页 的 区 别 。 

2. 移动 用 户 习惯 通过 主屏 幕 打开 App 应 用 ,而 Web 应 用 需要 打开 浏览 器 ,输入 URL 
地 址 ,操作 起 来 稍微 麻烦 。 其 实 ,移动 浏览 器 已 经 有 一 个 添加 到 主屏 幕 的 功能 ,把 一 个 Web 
的 url 十 favicon( 收 藏 夹 图 标 ) 模 拟 成 一 个 App 的 Logo. 创 建 到 主屏 上 ,使 得 Web 应 用 和 原 
生 App 一 样 方便 使 用 。 请 将 练习 1 中 的 百度 和 163 首页 通过 移动 浏览 器 的 “添加 到 主屏 
幕 ?功能 ,在 手机 屏幕 上 生成 “百度 新 闻 ” 和 ”* 网 易 新 闻 ”Logo。 
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移动 Web 啊 应 式 设计 


由 于 移动 设备 的 屏幕 和 分 辩 率 多 样 性 ,移动 Web 开发 的 一 个 问题 是 要 让 Web 应 用 适 
应 不 同 的 移动 设备 屏幕 尺寸 。 让 用 户 使 用 同一 个 应 用 ,不 管 是 在 桌面 大 屏幕 上 和 移动 小 屏 
幕 上 使 用 ,都 提供 一 致 的 用 户 体验 ,没有 任何 的 不 适应 感觉 或 功能 的 缺失 。 同 时 ,也 让 应 用 
开发 者 不 需要 编写 烦琐 的 代码 ,在 一 个 应 用 上 设计 出 弹性 的 UI 来 自动 适应 不 同 移动 设备 

移动 响应 式 Web 设计 是 把 固定 的 (Fixed) UI 布局 变 为 相对 的 (Relative) 设 计 , 主 要 从 
三 个 方面 人手 : Fluid Grid( 流 体 网 格 )、 动 态 图 片 (Liquid Image) 、 媒 体 查询 选择 器 (CSS 3 
Media Queries) 。 


19.1 关于 视 口 .像素 和 分 辨 率 


移动 Web 开发 的 一 个 主要 目的 就 是 把 Web 页 面 的 CSS 布局 在 移动 浏览 器 中 ,让 用 户 
得 到 良好 的 体验 。 要 改变 一 个 CSS 布局 来 适应 移动 设备 屏幕 ,将 要 涉及 像素 、 视 口 
(Viewport) 和 分辨 率 的 技术 问题 。 


19.1.1 屏幕 分 辩 率 、 像 素 、 像 素 密度 与 CSS 问题 


在 Web 开发 中 ,CSS 用 得 最 多 的 单位 就 是 像素 (Pixel) ,而 在 讨论 计算 机 屏幕 特性 的 时 
候 ,我 们 也 很 关心 屏幕 的 分 辩 率 ,希望 分 辩 率 越 高 越 好 ,高 分 辩 率 可 以 带 来 良好 的 视觉 体验 。 
而 分 辩 率 的 最 小 单元 就 是 像素 。 屏 幕 像素 是 把 屏幕 分 割 成 最 小 的 一 个 显示 亮点 ,像素 就 相 
当 于 一 个 灯泡 ,可 以 被 计算 机 控制 : 点 亮 或 熄灭 。 分 辩 率 是 指 在 屏幕 的 高 和 宽 上 有 多 少 个 
像素 点 ,分辩 率 越 高 ,像素 点 越 密 集 , 画 质 越 细 腻 。 

但 是 ,到 了 Web 时 代 ,像素 分 成 以 下 两 个 独立 概念 。 

(1) 设备 像素 : 设备 屏幕 的 物理 像素 ,例如 ,台式 计算 机 的 显示 器 分 辩 率 基本 上 是 1920 XxX 
1080 二 2 073 600 个 像素 。 

(2) CSS 像素 : 为 Web 开发 规范 定义 的 ,在 CSS 布局 中 使 用 的 一 个 抽象 的 像素 单位 。 
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由 于 Web 开发 者 使 用 的 是 CSS 的 像素 单位 ,那么 CSS 像素 和 物理 设备 的 像素 之 间 是 
如 何 匹 配 的 呢 ? 当 Web 开发 者 定义 一 个 300px 宽 的 元 素 样 式 时 ,浏览 器 会 帮助 我 们 把 CSS 
像素 按 比 例 覆 盖 到 物理 像素 点 上 。 由 于 Web 页 面 有 缩放 功能 ,CSS 像素 会 按 相 应 缩放 比例 
重新 计算 后 ,覆盖 到 物理 像素 点 。 例 如 ,如 果 页 面 的 缩放 比例 是 100% ,那么 一 个 CSS 像素 
相当 于 一 个 屏幕 物理 像素 , 当 用 户 把 Web 页 面 缩小 到 某 一 程度 ,多 个 CSS 像素 就 相当 于 一 
个 物理 像素 。 

但 是 , 当 革 果 公司 发 布 iPhone 4 手机 后 ,手机 的 屏幕 分 辩 率 发 生 了 重大 变化 ,并 提出 了 
像素 密度 (Pixel Per Inch,PPI) 概 念 ,定义 为 沿 着 对 角 线 ,每 英寸 所 拥有 的 像素 (Pixel) 数 目 
(可 以 用 三 角形 的 勾 股 定理 计算 对 角 线 长 度 ,再 除 屏幕 尺寸 )。PPI 把 屏幕 尺寸 和 分 辩 率 组 
合计 算 ,来 表示 显示 屏 的 密度 。 当 PPI 值 大 于 300 时 ,人 类 眼睛 已 经 无 法 分 辨 图 像 的 每 个 像 
素 颗 粒 感 ,所 以 ,大 于 300PPI 的 屏幕 也 称 为 视网膜 屏 。iPhone 4 的 高 、 宽 像素 分 辩 率 提高 到 
iPhone 3GS 的 两 倍 ,(320X2)X(480X2) 王 960X640( 相 应 PPI 二 326) ,所 以 ,iPhone 4 的 屏 
幕 称 为 视网膜 屏 。 

在 早期 第 一 代 手 机 应 用 开发 编写 的 App 应 用 ,是 直接 根据 物理 屏幕 分 辩 率 (320 X 
480px) 绝 对 定位 坐标 来 写 代 码 ,那么 这 些 开 发 的 App 运行 在 新 一 代 手 机 上 就 会 发 生 UI 界 
面 不 兼容 问题 ,所 以 ,苹果 公司 提出 了 point( 点 ) 的 概念 来 蔡 换 物理 像素 。 这 样 的 处 理 方法 ， 
将 之 前 以 像素 作为 单位 转换 成 以 点 作为 单位 ,原来 的 绝对 值 (x,y) 坐 标 ,以 点 为 单位 ,这 样 
iPhone 3GS 的 应 用 程序 就 也 可 以 运行 在 iPhone 4 上 面 不 会 变形 。 对 于 矢量 数据 ,例如 , 文 
字 显 示 更 清晰 ,但 是 ,图 片 可 能 显示 会 模糊 ,因为 分 辩 率 低 的 小 图 片 会 按 比 例 二 倍 放大 显示 
在 iPhone 4 上 。 


19.1.2 视 口 


视 口 (Viewport) 是 针对 Web 应 用 开发 提出 的 抽象 窗口 ,简单 来 说 是 通过 一 个 窗口 看 到 
的 网 页 内 容 。CSS 样式 布局 是 工作 在 一 个 抽象 的 窗口 层面 , 称 为 布局 视 口 。 

在 台式 计算 机 时 代 ,Web 开发 的 CSS 布局 视 口 虽然 是 根据 台式 计算 机 显示 器 的 分 辩 率 
来 制定 布局 尺度 ,但 是 ,CSS 布局 视 口 与 浏览 器 窗口 关系 最 密切 。 例 如 ,我们 定义 一 个 CSS 
的 元 素 宽 度 是 width 二 36% ,这 个 百分比 是 相对 于 浏览 器 窗口 的 宽度 ,而 不 是 相对 显示 器 分 
辩 率 的 宽度 。 注 意 , 台 式 计算 机 的 浏览 器 可 用 于 任意 调整 窗口 尺寸 ,悬浮 在 屏幕 上 ,所 以 , 浏 
览 器 的 窗口 尺寸 是 可 以 变化 的 。 我 们 从 下 面 的 代码 中 可 以 获取 物理 屏幕 宽度 和 浏览 器 窗口 
的 宽度 , 见 例子 19-1 。 








alert(' 物 理 像素 宽度 : ' + window. screen. width) ; 

alert( "屏幕 可 用 宽度 : '+ window. screen. availWidth) 本 
alert( ' 浏 览 器 窗口 宽度 : ,+ $ (window). width()); ROR etert 寺 
alert(' 文 档 对 象 宽度 : '+ $ (document).width()); 
alert(' 网 页 宽度 : ' + document. body. clientWidth); 











从 获取 的 数据 可 以 看 到 ,屏幕 分 辨 率 宽 度 永远 是 显示 器 设 定 的 分 辩 率 宽度 ,而 浏览 器 窗 
口 宽度 会 随 着 浏览 器 窗口 大 小 而 变化 ,如 果 不 对 页 面 进行 缩放 的 话 , 缩 小 的 浏览 器 窗口 只 能 
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看 到 页 面 的 局 部 内 容 。 

到 了 移动 终端 时 代 , 视 口 的 概念 又 出 现 新 的 定义 。 这 是 由 于 移动 设备 的 小 屏 问 题 决 定 
了 CSS 的 布局 视 口 不 再 与 浏览 器 视 口 产生 联系 ,而 是 重新 定义 了 三 种 视 口 。 这 是 由 全 果 公 
司 在 开发 第 二 代 苹 果 手 机 时 ,提出 的 Web 应 用 解决 方案 ,具体 如 下 。 

(1) 布局 视 口 (Layout Viewport) : 是 CSS 抽象 出 来 的 一 个 视 口 ,用 来 解决 台式 计算 机 
网 页 内 容 在 手机 屏幕 显示 的 问题 ,因为 早期 的 Web 开发 是 针对 台式 计算 机 的 ,CSS 的 像素 
单位 通过 浏览 器 与 物理 像素 拥 绑 , 例 如 ,大 多 数 台式 计算 机 网 站 默认 的 页 面 宽度 是 960px， 
而 第 一 代 智 能 iPhone 手机 的 分 辩 率 是 320X480, 显 然 , 网 站 页 面 设 计 的 宽度 大 大 超出 了 手 
机 屏幕 宽度 ,而 移动 浏览 器 的 宽度 也 是 设备 屏幕 宽度 320px, 这 样 的 网 站 内 容 在 手机 显示 
时 ,传统 情况 下 ,浏览 器 应 该 会 重新 计算 CSS 像素 和 设备 像素 的 比例 ,从 960px 强制 压缩 到 
320px, 相 当 于 三 倍 的 压缩 比 , 造 成 手机 屏幕 显示 的 内 容 变 小 ,阅读 效果 差 。 为 了 解决 这 个 
问题 ,CSS 的 布局 视 口 完全 独立 ,移动 浏览 器 不 再 强制 计算 压缩 CSS 像素 。 用 户 可 以 通过 
缩放 解决 手机 阅读 Web 页 面 问题 。 也 就 是 下 面 说 的 视觉 视 口 。 为 了 兼顾 桌面 浏览 器 设计 
的 网 站 ,大 多 数 移动 设备 内 置 的 移动 浏览 器 默认 布局 视 口 的 宽度 定义 为 980px 或 1024px 
(根据 不 同 设备 略 有 区 别 ) ,可 以 通过 下 面 的 代码 获得 布局 视 口 宽度 值 。 








document. documentElement. clientWidth; 











(2) 视觉 视 口 (Visual Viewport): 简单 地 说 就 是 用 户 通过 手机 屏幕 看 到 的 那 部 分 内 
容 ,在 布局 视 口 不 可 变 的 情况 下 ,用 户 通过 缩放 来 浏览 网 页 内 容 , 视 觉 视 口 就 相对 于 手机 屏 
幕 ,整个 网 页 是 放 在 布局 视 口 里 面 , 相 当 于 一 张 报 纸 , 用 手机 看 网 页 ,就 好 比 用 放大 镜 读 报 
纸 ,通过 手机 触摸 屏 缩放 来 看 局 部 内 容 或 整个 内 容 。 用 户 的 缩放 操作 会 改变 视觉 视 口 的 大 
小 ,但 不 会 影响 布局 视 口 ,布局 视 口 还 是 保持 在 原来 的 尺寸 不 变 。 所 以 ,放大 操作 让 视觉 视 
口 变 小 ,缩小 操作 让 视觉 视 口 变 大 。 例 如 ,一 条 1024px 的 线条 ,用 户 通过 缩放 操作 放大 
200% ,相对 于 视觉 视 口 ,是 缩小 一 倍 ,也 就 是 用 户 的 视觉 视 口 缩小 到 512px, 看 到 的 布局 视 
口 里 面 的 1024px 线条 只 有 一 半 。 下 面 是 通过 JS 代码 获取 视觉 视 口 宽度 。 





window. innerWidth; 











(3) 理想 视 口 (Ideal Viewport): 可 以 简单 地 理解 ,布局 视 口 是 针对 Web 开发 人 员 的 ， 
视觉 视 口 是 针对 用 户 的 ,理想 视 口 是 针对 设备 厂商 的 。 首 先 ,CSS 布局 视 口 的 默认 宽度 为 
980px, 并 不 是 一 个 理想 的 宽度 ,正常 情况 下 ,一 个 网 站 页 面 都 希望 按 最 合理 的 宽度 显示 在 
手机 屏幕 里 面 ,而 不 需要 用 户 去 做 缩放 观看 ,所 以 , 当 一 个 网 站 针对 手机 优化 的 时 候 , 开 发 人 
员 会 用 到 下 面 的 代码 。 





< meta name = "viewport" content = "width= device — width; initial ~ scale=1.0; 
user — scalable = no;"> 











在 这 个 语句 里 面 ,width= device-width 就 是 把 CSS 布局 视 口 的 默认 宽度 980px, 改 变 
成 理想 视 口 宽度 ,initial-scale 二 1 设 定 页 面 缩放 比例 为 100%,user-scalable 二 no 表示 用 户 
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不 可 以 通过 缩放 方式 观看 网 页 。 理 想 视 口 像素 是 由 设备 厂家 设 定 的 固定 值 ,也 叫 DIP 
(Device Independent Pixels ,设备 独 立 像素 ) ,与 设备 屏幕 分 辩 率 无 关 。 理 想 视 口 可 以 通过 
以 下 代码 获取 (依赖 于 不 同 浏览 器 ,得 到 的 值 可 能 是 物理 设备 像素 ) 。 





Screen. width; 











iPhone 的 理想 视 口 值 ,物理 像素 与 像素 密度 比 的 关系 见 表 19-1。 
表 19-1 iPhone 手机 理想 视 口 像素 分 辩 率 值 























设 备 理想 视 口 分 辩 率 | 物理 像素 分 辩 率 像素 密度 比 屏幕 宽 高 比 
iPhone 3GS 320X480px 320X480px 1 320/480 一 0. 667 
iPhone 4 320X 480px 640 X 960px 2 320/480 一 0. 667 
iPhone 5 320X 568px 640 X 1136px 2 320/568 一 0. 563 
iPhone 6 375X667px 750X1334px 2 375/667 一 0. 562 
Iphone 6 Plus 414X736px 1242X 2208px 3 414/736 一 0. 563 











19.2 媒体 查询 选择 器 


HTML 5 提出 从 以 下 两 个 方面 来 解决 移动 应 用 显示 界面 问题 。 

(1) 根据 不 同 的 显示 设备 ,及 屏幕 大 小 和 分 辩 率 来 选择 不 同 的 样式 文件 ,这 是 通过 
<1link > 标签 的 media 属性 解决 样式 文件 的 选择 ,也 称 之 为 媒体 查询 选择 器 。 

(2) 通过 < meta > 标签 的 name 一 "viewport" 属 性 来 解决 移动 设备 的 物理 分 辩 率 与 视 口 
分 辩 率 (也 称 之 为 CSS 分 辩 率 ) 差 异 ,通过 缩放 页 面 来 提高 用 户 的 视觉 体验 。 这 个 概念 最 早 
是 由 Apple Safari 浏览 器 提出 的 技术 ,已 经 得 到 其 他 浏览 器 的 支持 。 


19.2.1 Media 媒体 查询 


CSS 3 的 媒体 查询 是 通过 在 链接 样式 表 标 签 < link > 中 加 入 一 个 Media 媒体 属性 ,可 以 
根据 不 同 的 媒介 优化 选择 不 同 的 样式 表 。 不 同 Media 媒体 如 表 19-2 所 示 。 
表 19-2 Media 媒体 值 






































Media 值 说 明 
all( 默 认 ) 适用 于 所 有 设备 
handheld 小 屏幕 ` 有 限 的 带宽 移动 设备 
projection 投影 机 
print 打印 预览 模式 /打印 页 。 打 印 机 输出 
screen 显示 器 屏幕 
tv 低 分 辩 率 的 电视 类 型 设备 屏幕 
width 显示 区 的 宽度 。 可 加 “min-” 和 “max-” 前 组 
height 显示 区 的 高 度 。 可 加 “min-" 和 “max-” 前 组 
device-width 显示 设备 /纸张 的 宽度 。 可 加 “min-" 和 “max-” 前 缀 
device-height 显示 设备 /纸张 的 高 度 。 可 加 “min-” 和 “max-” 前 缀 
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下 面 是 通过 媒体 检测 来 决定 使 用 不 同样 式 的 例子 ,设备 的 屏幕 宽度 是 媒体 查询 基本 参 
数 放 一 5 
(1) 检测 设备 的 显示 区 域 小 于 480px 和 设备 屏幕 宽度 小 于 480px 时 ,采用 style480. css 
样式 表 。 加 入 关键 字 only 是 让 旧 浏 览 器 忽略 样式 表 。 代 码 如 下 。 








< link rel = "stylesheet" href = style 480. css 
media =" only screen and (max — width:480px)，screen and (max— device— width:480px)" /> 











(2) 检测 移动 设备 屏幕 方向 来 决定 使 用 不 同 的 样式 表 ,landscape 表示 横 屏 ,portrait 表 
示 竖 屏 ,就 是 指定 输出 设备 中 的 页 面 可 见 区 域 高 度 大 于 或 等 于 宽度 。 代 码 如 下 。 





media = "screen and (orientation: landscape)" 
media = "screen and (orientation:portrait)" 











(3) 检测 屏幕 比例 来 决定 不 同 的 样式 表 。 例 如 ,16 :9 和 4:3 的 屏幕 比例 。 代 码 
如 下 。 





‘only screen and (aspect 一 ratio: 16/9) 
only screen and (aspect 一 ratio: 4/3) 











(4) 如 果 媒 体 查 询 是 直接 写 在 CSS 文件 里 面 , 下 面 代码 第 一 行 表示 如 果 屏 幕 处 于 竖 屏 ， 
背景 颜色 改 为 红色 ,第 二 行 表 示 如 果 检 测 到 屏幕 为 横 屏 , 则 导入 landscape. css 样式 。 





@media screen and (orientation:portrait) {background: red;} 
@ import url( landscape. css) screen and (orientation:landscape); 











(5) 以 像素 密度 比 (Device Pixel Ratio, DPR) 来 决定 样式 。 但 是 ,这 种 方式 是 针对 
WebKit 浏览 器 引擎 的 。 现 在 很 多 智能 手机 的 屏幕 分 辩 率 已 经 超过 480px 宽度 ,例如 ， 
iPhone 4 的 视网膜 分 辩 率 达到 640 X960px, 但 是 由 于 手机 屏幕 尺寸 还 是 在 3. 5 一 5 英寸 之 
间 , 所 以 ,设备 像素 max-device-width 还 是 定义 为 320px 作为 显示 理想 视 口 宽度 ,而 实际 宽 
度 的 分 辩 率 已 经 达到 640px, 所 以 这 两 个 之 间 的 比例 定义 为 像素 密度 比 。 可 以 通过 
window. devicePixelRatio 获取 像素 密度 比 。 下 面 的 代码 是 以 像素 密度 比 作 为 媒体 查询 。 





media= "(max— device— width= 320px) and ( — webkit — min— device — pixel — ratio:2)" 











(6) 像素 密度 比 也 可 以 给 不 同 分 辨 率 的 手机 设备 分 类 。 例 如 ,如 果 浏 览 器 的 设备 像素 
(理想 视 口 ) 定 义 为 320px, 则 设备 物理 分 辩 率 与 设备 像素 (理想 视 口 ) 比 率 为 1 的 手机 有 : 
iPhone( 第 一 代 ) .iPhone 3 等 ,比率 为 1.3 的 设备 有 Google Nexus 7, 比 率 为 1.5 的 有 : 
Google Nexus S.Samsung Galaxy S II .HTC Desire 等 ,比率 
为 2 的 有 : iPhone 4 iPhone 4S iPhone 5.,iPad 等 。 例子 19-2: 

在 例子 19-2 的 media. html 中 ,针对 屏幕 分 辩 率 小 于 | Part3/eh19/mediahtml 
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480px 的 设备 ,布局 从 两 栏 变 成 一 栏 , 要 求 块 元 素 宽 要 达到 屏幕 宽 , 取 消 块 浮动 ,所 以 ,代码 
变 成 : 





article {float:none;width:auto;} 











用 Google 的 Chrome 浏览 器 的 开发 者 工具 来 模拟 移动 设备 的 物理 分 辩 率 来 查看 
media. html 分 别 在 小 于 480px 宽 的 设备 和 大 于 480px 宽 的 设备 中 不 同 的 布局 效果 。 


19.2.2 viewport 的 缩放 技术 


当 一 个 网 页 在 桌面 打开 时 , 它 是 以 默认 的 960px CSS 分 辩 率 宽度 显示 ,所 以 ,任何 台式 
PC 上 都 可 以 正常 显示 一 个 完整 的 网 页 。 但 是 , 当 一 个 CSS 分 辩 率 为 960px 宽 的 网 页 在 移 
动 设备 屏幕 显示 时 ,其 效果 就 不 同 了 。 如 果 一 个 移动 设备 屏幕 物理 显示 分 辩 率 是 480px 
宽 , 我 们 只 能 在 手机 屏幕 上 看 到 网 页 的 一 部 分 内 容 , 如 果 移 动 设备 物理 显示 分 辨 率 是 960px 
宽 ,虽然 可 以 看 到 全 部 的 网 页 内 容 , 但 是 ,对 于 一 个 手机 屏幕 是 4 一 5 英寸 的 尺寸 来 说 ,网 
页 内 容 又 显示 太 小 。 虽 然 用 户 也 可 以 通过 触摸 屏 来 缩放 查看 内 容 , 但 是 ,这 种 方式 的 用 
户 体 验 较 差 。 所 以 ,通过 viewport 技术 < meta name 二 "viewport"…*> 来 让 浏览 器 获取 设备 
的 实际 宽度 (width= device-width) (前 面 提 到 的 理想 视 口 宽度 ) ,而 不 是 屏幕 分 辨 率 , 通 过 
像素 密度 比 960/480= 二 2, 相 当 于 2px CSS 像素 ==1px 物理 像素 ,让 页 面 在 这 个 比例 压缩 为 
满 屏 显示 。 

一 个 移动 网 页 优化 的 满 屏 显示 页 面 viewport 的 定义 代码 如 下 ,这 里 的 width= device- 
width 是 让 视 口 的 宽度 和 设备 屏幕 宽度 相同 ,来 自动 缩放 达到 满 屏 。 





< meta name = "viewport" content = "width = device - width，initial ~- scale = 1, maximum— Scale 
= 1"> 











具体 参数 说 明 如 表 19-3 所 示 。 
表 19-3 viewport 的 参数 





























viewport 参数 值 说 明 

a viewport 宽度 ,可 以 是 px 值 ,一 般 设 为 device-width 设备 的 宽 
度 , 相 当 于 100% 的 CSS 的 像素 单位 缩放 

height 指定 viewport 高 度 

initial-scale 页 面 加 载 时 初始 缩放 比例 ,可 以 是 浮 点 数 , 缩 放 值 0.01 一 10 

maximum-scale 允许 用 户 通 过 触摸 屏 缩放 到 的 最 大 比例 

minimum-scale 允许 用 户 通过 触摸 屏 缩放 到 的 最 小 比例 

user-scalable 用 户 是 否 可 以 手动 缩放 

target-densitydpi 针对 Android 系统 的 一 个 参数 ,屏幕 像素 密度 





Android 系统 根据 移动 设备 屏幕 像素 密度 分 为 高 中 低 三 种 ,target-densitydpi 的 值 就 是 
不 同 像素 密度 的 Android 设备 。 目 前 ,Android 系统 已 经 放弃 这 个 属性 ,建议 不 要 采用 。 
(1) device-dpi: 使 用 设备 原本 的 dpi 作为 目标 dpi, 不 会 产生 默认 缩放 。 但 是 通过 
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viewport 的 width 定义 为 与 设备 的 width 匹配 ,来 让 页 面 和 屏幕 相 适 应 。 

(2) high-dpi: 使 用 hdpi 作为 目标 dpi, 中 等 像素 密度 和 低 像素 密度 设备 相应 缩小 。 

(3) medium-dpi: 使 用 mdpi 作为 目标 dpi, 高 像素 密度 设备 相应 放大 ,像素 密度 低 设备 
相应 缩小 。 这 是 默认 的 target-densitydpi。 

(4) low-dpi: 使 用 ldpi 作为 目标 dpi, 中 等 像素 密度 和 高 像素 密度 设备 相应 放大 。 

(5) < value >: 指定 一 个 具体 的 dpi 值 作为 target-densitydpi, 这 个 值 的 范围 必须 在 
70 一 400 之 间 。 


19.2.3 使 用 viewport 的 效果 比较 


例子 19-3 是 一 个 用 户 登 录 页 面 ,定义 了 页 面 的 CSS 宽度 是 960px,login 区 块 占 了 
500px 宽 , login 的 input 占 了 300px 宽 。noviewport. html 页 面 没有 定义 viewport， 
viewport. html 定义 viewport 的 属性 width = device-width, 500viewport. html 定义 
viewport 的 width 二 500, 用 Chrome 浏览 器 模拟 移动 设备 屏幕 分 辨 率 是 320px 宽 的 效果 图 
如 图 19-1 所 示 。 可 以 看 到 ,viewport. html 的 效果 最 好 , 满 
屏 , 字 体 大 小 与 屏幕 匹配 ,用 户 体 验 最 好 。500viewport. html ”例子 19-3: 

的 视 口 宽 定义 500px, 而 登录 区 设置 的 宽 为 500px, 但 是 , 它 。 Part3/eh19/viewport. html， 
还 是 按 比例 装 进 了 320px 宽 的 物理 屏 里 面 ,并 且 , 字 体 清晰 。 ?ew Pn S00viewpor 
而 没有 采用 viewport 技术 的 noviewport. html 显示 的 效果 最 

差 ,用户 名 和 密码 基本 看 不 清楚 。 


S00viewport noviewport viewport 


图 19-1 viewport 效果 图 比较 



































19.3 流体 网 格 布局 


早期 的 Web 设计 是 针对 桌面 计算 机 的 ,具有 固定 的 布局 模式 。 所 谓 固定 布局 ,就 是 用 
绝对 的 像素 值 px 来 设计 页 面 元 素 的 高 宽 , 一 般 默认 的 页 面 总 宽 为 960px, 有 三 栏 和 多 栏 的 
布局 方式 。 但 是 ,针对 移动 应 用 的 布局 ,考虑 移动 设备 多 数 的 屏幕 像素 是 320px 或 480px， 
虽然 现在 流行 视网膜 屏 , 即 相当 于 台式 计算 机 的 分 辩 率 ,可 是 ,移动 屏幕 尺寸 还 是 以 4 一 5.5 
英才 为 主流 ,所 以 ,网 页 的 移动 布局 设计 常常 被 设计 成 一 栏 或 两 栏 的 布局 结构 。 并 且 , 考 虑 
到 一 个 应 用 要 适应 台式 计算 机 、 平 板 电脑 和 手机 的 要 求 , 要 实现 响应 式 移动 布局 ,就 要 从 固 
定 的 变 成 相对 的 、 可 流动 的 设计 方法 ,需要 从 几 个 方面 进行 改变 。 


19.3.1 网 格 布局 


网 格 (Grid) 布 局 ,是 通过 把 一 张 网 页 划分 成 固定 的 格子 结构 ,来 进行 网 页 布局 设计 。 这 
样 可 以 让 格子 来 定位 和 分 配 网 页 内 容 , 具 有 良好 的 浏览 体验 。 
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把 一 个 页 面 拆 分 成 多 个 网 格 区 块 , 当 屏幕 宽大 的 时 
候 网 格 区 块 是 自动 向 水 平 扩展 , 当 屏 幕 变 窗 的 时 候 , 格 子 例子 19-4: 
区 块 纵 向 堆 莽 ,从 而 实现 响应 式 设计 的 页 面 布 局 。 见 例 Part3/ch19/responsive. htm] 
子 19-4。 


19.3.2 将 CSS 的 块 单位 从 像素 变 成 百分数 


移动 布局 的 重点 是 考虑 宽度 有 关 的 CSS 规则 ,凡是 有 宽度 定义 的 地 方 , 都 要 改 成 与 上 
级 容器 宽度 的 百分比 单位 ,因为 ,我 们 无 法 知道 一 个 移动 设备 是 320px 宽 还 是 480px 宽 , 或 
者 是 其 他 。 所 以 ,用 百分比 单位 是 最 适合 移动 应 用 设计 的 , 当 屏 幕 大 小 和 分 辩 率 改变 的 时 
候 , 我 们 的 移动 布局 页 面 是 按 百 分 比 充满 屏幕 。 例 如 ,页 面 定义 了 body{ width:960px), 导 
航 栏 井 nav{width:260px} ,内 容 栏 并 main{width:500px) ,边栏 aside{ width 一 200px} ,移动 
布局 必须 修改 成 body {width:100%}),#nav{width:27%),# main{width:52%}),#aside 
{width:21%)。 一 个 通用 的 公式 是 : 当前 区 块 像素 / 父 区 块 像素 一 百分比 数 。 


19.3.3 字体 的 流 式 布局 


我 们 已 经 把 页 面 的 块 元 素 大 小 都 从 固定 值 变 成 了 百分数 相对 值 ,页 面 的 字体 大 小 也 要 
从 固定 值 px 转变 成 流 式 的 相对 值 em 单位 ,而 em 单位 是 相对 父 元 素 的 值 ,还 要 在 页 面 的 顶 
层 容 器 body 元 素 下 定义 字体 为 100% ,作为 基准 字体 的 重 置 ,代码 如 下 。 














body{font — size:100% } // 默 认 字 体 16px * 100 % = 16px 
p{font - size:1em} //16px * 1= 16px 
hi{font— size:1. 5em} //16px * 1.5 = 24px 











如 果 上 面 代码 中 的 hl 还 有 幅 套 元 素 ,这 个 元 素 字 体 就 要 相对 hl 来 计算 。 所 以 ,每 次 设 
置 都 要 知道 父 元 素 的 字体 值 ,非常 麻烦 。CSS 3 提出 了 新 字体 单位 rem, 所 有 元 素 字体 为 
HTML 元 素 字体 的 相对 值 , 这 样 ,只 要 调整 HTML 的 字体 值 ,所 有 元 素 字 体 都 会 按 比例 调 
整 ,这 样 便于 维护 。 


19.4 动态 图 片 处理 


如 果 把 图 片 尺 寸 也 按 百 分 比 的 流 式 网 格 布局 修改 ,但 是 ,图 片 并 不 遵循 这 种 流 式 网 格 布 
局 的 方法 ,大 的 图 片 往往 会 超出 上 级 容器 范围 。 解 决 的 方法 是 在 CSS 定义 代码 如 下 : 





img{max — width:100 % ;height:auto;} 











这 个 方法 同样 也 适用 于 视频 (video) ,object 元 素 对 象 。 这 样 设计 ,再 大 的 图 片 和 多 媒 
体 元 素 就 不 会 超出 父 元 素 的 范围 。 

但 是 ,使 用 图 片 的 width 和 height 属性 设置 ,并 不 能 完全 解决 小 屏幕 的 图 片 收缩 变形 
问题 ,同时 ,处 理 大 图 片 还 会 浪费 移动 带宽 和 处 理 器 资源 。 从 原理 上 讲 , 可 以 针对 不 同 屏幕 
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大 小 ,采用 大 小 不 同 的 图 片 来 达到 图 片 响应 式 设计 的 理想 效果 。 但 是 ,在 HTML 中 img 元 
素 无 法 加 载 多 个 图 片 源 ,所 以 ,只 能 通过 JavaScript 获取 视 口 来 实现 图 片 的 切换 ,代码 如 下 。 





var viewport = window. innerWidth; // 获 取 当 前 视 口 
if (viewport <= 480) {img. src = "images/img480. jpg";} else {img. src = "images/img1024. jpg";} 
// 根 据 视 口 切换 图 片 











这 种 方法 的 问题 是 大 多 数 浏览 器 先 加 载 HTML 页 面 ,再 加 载 JavaScript 代码 ,为 防止 
浏览 器 提前 下 载 图 片 , 需 要 把 网 页 的 图 片 src 属性 设置 为 空 < img src 一 "">, 这 样 设 计 容 易 
产生 维护 问题 。 其 他 关于 流 式 图 片 的 解决 方法 还 有 通过 自 定义 属性 “data- ”加 媒体 查询 "@ 
media" 来 根据 屏幕 分 辨 率 切 换 图 片 。 代 码 如 下 。 





< img src = "about:blank"data - 480px = "image - 480px. jpg" data - 800px = "image — 800px. jpg" 
alt=""> 

<style> 

@media (min - device— width:480px) { 

img[ data — 480px] {content: attr(data— 480px, url);}} 

@media (min - device— width:800px) { 

img[ data — 800px] {content: attr(data— src— 800px, url);}} 

</style> 











还 有 通过 第 三 方 图 片 服务 器 (也 称 之 为 响应 式 图 像 服 务 器 ) 来 解决 图 片 切换 问题 。 例 
如 ,通过 senchar. io 为 每 一 种 设备 提供 大 小 适合 的 图 像 。 其 方法 是 把 img 的 src 改写 成 
http://src. sencha. io/http://[ 图 像 的 路 径 ],sencha 会 将 原 图 收缩 成 适当 的 大 小 来 适应 访 
问 的 设备 。 


19.5 BootStrap 一 个 Web 响应 式 框 架 


以 网 格 布局 (Grid System) 的 Web 响应 式 前 端 设计 框架 有 很 多 ,例如 ,BootStrap 和 
Foundation 都 是 响应 式 的 流体 网 格 ,移动 优先 (Mobile First) 的 布局 框架 。 

这 里 分 析 BootStrap 的 基本 设计 思想 。BootStrap 目前 的 3. x 版 与 2. x 版 有 很 大 差别 ， 
下 面 的 代码 案例 是 基于 3. x 版 的 。 首先 , BootStrap 将 页 面 划 分 为 CSS 的 类 ,容器 
(. container) \ 行 (. row) 和 列 (. column), 列 共 分 成 12 等 宽 的 列 。container、row、column 必 
须 是 包含 的 层级 关系 。 也 就 是 container 包含 row,row 里 面 有 column。col-md-4 表示 4 个 
列 组 合成 一 个 块 栏目 ,共有 三 个 栏目 块 。 代 码 如 下 , 见 例 子 19-5 。 








IT | 
例子 19-5: 
part3/ch19/bootstrap/ 
bootstrap. html 


<div class= "container"> 

< div class = "row"> 

<div class= "col 一 md 一 4"></div> 
<div class= "col -md— 4"></div> 
<divclass="col —- md- 4"></div> 
</div> 
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BootStrap 定义 了 4 种 不 同 屏幕 尺寸 的 class, 前 缀 分 别 是 col-xs、col-sm、col-md、col-lg， 
分 别 表示 超 小 (<768px)、 小 (三 768px) .中 (三 992px) 大 (过 1200px) 的 屏幕 , 当 设 备 屏幕 在 
定义 的 阔 值 范围 内 时 ,一 行 里 面 的 列 块 是 按 水 平 排列 的 ,否则 按 垂直 排列 ,从 而 实现 响应 式 
设计 。 

BootStrap 的 导航 条 也 可 以 实现 响应 式 设计 风格 ,设计 分 成 两 个 部 分 ,一 个 是 折 释 的 
icon-bar 图 标 放 在 button. navbar-toggle 按钮 里 面 ,一 个 是 导航 条 的 菜单 内 容 放 在 div. 
navbar-collapse 容器 里 。 按 钮 里 面 的 data-target 二 # menu 
与 导航 条 内 容 id= menu 产生 关联 ,触发 响应 的 阅 值 是 当 屏 ” 鲍 子 19-6: 

幕 宽度 小 于 768px 时 ,导航 条 变 成 只 显示 icon-bar 图 标 按钮 ， Part3/eh19/bootstrap/ 
单 击 icon-bar 图 标 按钮 ,垂直 展开 导航 条 沫 单 内 容 。 当 屏 医 Peer hm 
大 于 768px 时 ,导航 条 恢复 水 平 布局 。 见 例子 19-6 ,代码 如 下 。 








<div class = "navbar navbar - default"> 

<div class = "navbar - header"> 

< button class = "navbar - toggle" type = "button" data - toggle = "collapse" data - target = 
"#menu"> 

< span class = "sr — only"></span> 

< span class = "icon— bar"></span> 

< span class = "icon— bar"></span> 

< span class = "icon— bar"></span> 

</button> 

</div> 

<div class = "collapse navbar - collapse" id= "menu"> 
<ul class = "nav navbar - nav"> 

<1i><a href ="## "> 首页 </a></1i> 

<1i><a href ="##"> HTML5 教程 </a></1i> 

<1i><a href ="##"> Bootstrap 介绍 </a></1i> 
<1i><a href ="##"> 响 应 式 设计 </a></1i> 

<1i><a href ="##"> WEB 移动 开发 </a></1i> 

</ul > 

</div> 

</div> 











BootStrap 不 仅 是 一 个 响应 式 设计 框架 , 它 也 提供 了 丰富 的 UI 设计 组 件 。 例 如 ,字体 
图 标 、 按 钮 下拉 菜 单 、 导 航 栏 、 表 格 、 表 单 等 样式 。 


练习 


1. 按照 移动 Web 响应 式 设计 ,编写 一 个 页 面 , 使 用 媒体 查询 技术 , 当 屏 幕 分 辩 率 大 于 
800px 时 ,导航 菜单 采用 水 平 拉 伸 ,小 于 800px 时 , 变 成 垂直 拉 伸 。 

2. 修改 第 1 题 代码 , 当 手 机 处 于 横 屏 时 ,导航 栏 菜单 采用 水 平 拉 伸 , 处 于 竖 屏 时 ,菜单 
采用 垂直 拉 伸 。 

3. CSS 3 在 字体 的 流 式 布局 中 采用 了 新 的 相对 单位 em 和 rem, 这 两 个 单位 分 别 是 相 
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对 于 父 元 素 和 HTML 根 元 素 的 字体 相对 值 。 此 外 ,CSS 3 还 提出 了 vw 和 vh 单位 ,是 相对 
视 口 的 宽 , 高 度 的 1% 大 小 相对 值 ,例如 p{font-size:3wv}, 在 视 口 480px 时 的 字体 大 小 是 
3X480/100 二 14. 4px。 编 写 代码 ,定义 一 个 vw 单位 的 字体 ,用 浏览 器 的 开发 者 工具 的 移动 
模拟 器 查看 不 同 视 口 宽 度 对 字体 大 小 的 影响 。 

4. BootStrap 提供 响应 式 图 片 定义 class 二 "img-responsive" ,编写 代码 ,在 浏览 器 中 测 
试 效果 。 


第 <420) 前 


移动 Web UI 设计 


20.1 人 机 交互 的 UI 设计 


UI(User Interface, 用户 界 面 ) 设 计 ,就 是 人 与 计算 机 进行 交流 的 界面 接口 。GUI 
(Graphical User Interface, 图 形 化 用 户 界面 设计 ) 是 UI 的 一 个 子 集 。 通过 易 用 性 
(CUsability) 的 指标 ,来 评价 用 户 与 计算 机 交互 过 程 的 满意 程度 ,通常 也 称 为 用 户 体验 设计 。 


20.1.1 人 机 交互 的 发 展 


计算 机 最 早 的 主要 功能 就 是 计算 ,通过 键盘 .穿孔 卡 读 入 数据 完成 计算 功能 。 早 期 的 计 
算 机 交互 是 通过 一 个 CLI 命令 行 终端 来 完成 的 ,用 户 通 过 键盘 输入 指令 ,计算 机 处 理 的 结 
果 打 印 在 屏幕 上 。 这 种 用 命令 行 来 操作 的 应 用 程序 有 WordStar, 它 是 最 早 的 文本 编辑 系 
统 , 通 过 各 种 组 合 键 来 完成 文本 的 插入 删除、 修改 及 排版 工作 。 一 直到 现在 ,一 些 常用 组 合 
键 仍然 是 所 有 应 用 软件 的 默认 操作 ,例如 ,Ctrl 十 X 表示 前 切 ,Ctrl 十 C 表示 复制 ,Ctrl+V 表 
示 粘 贴 。 著 名 的 UNIX/Linux 操作 系统 下 的 程序 编辑 器 VI 也 是 键盘 人 机 交互 的 经 典 应 用 
系统 ,一 直到 现在 仍然 有 大 批 的 编程 开发 人 员 使 用 。 随 着 计算 机 应 用 的 普及 ,人 机 交互 的 要 
求 也 越 来 越 高 ,微软 公司 发 明了 图 形 界面 的 操作 系统 Windows, 紧 接着 是 鼠标 的 出 现 ,使 人 
机 交互 有 了 一 场 革命 性 的 进步 。 同 时 ,拥有 菜单 的 应 用 程序 更 方便 用 户 的 交互 ,用 户 不 用 去 
记 住 太 多 的 命令 ,而 是 通过 菜单 来 完成 操作 。 例 如 , 像 今天 人 们 熟悉 的 微软 Office 办 公 系 
统 。 除 了 菜单 的 界面 交互 , 越 来 越 多 的 应 用 程序 添加 了 图 形 化 的 工具 栏 来 加 强 用 户 体 验 , 工 
具 栏 使 用 更 形象 的 图 标 或 符号 来 表示 一 个 操作 的 功能 。 例 如 ,大 多 数 应 用 程序 都 用 早期 软 
盘 的 图 标 回 来 表示 保存 操作 。 这 种 图 标 工具 栏 最 后 演变 成 与 现实 世界 更 接近 的 按钮 。 特 
别 是 随 着 智能 手机 和 平板 电脑 的 流行 ,人 机 交互 的 方式 又 进行 了 一 场 新 的 革命 ,从 台式 计算 
机 的 键盘 十 鼠标 发 展 到 了 触摸 屏 的 交互 方式 ,移动 设备 上 应 用 软件 把 按钮 作为 人 机 交互 界 
面 必 不 可 少 的 元 素 。 如 图 20-1 所 示 是 人 机 交互 的 演变 过 程 , 分 别 是 Windows 的 字符 终端 ， 
Windows 的 文件 浏览 器 图 形 界面 ,以 及 锤子 手机 的 应 用 商店 界面 。 
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图 20-1 三 种 人 机 交互 界面 的 演变 


20.1.2 移动 设备 的 交互 特殊 性 


随 着 移动 设备 的 触摸 屏 和 视网膜 屏 的 出 现 , 以 及 移动 处 理 器 的 性 能 提升 ,手势 人 机 交互 
成 为 手机 平板 等 移动 设备 的 基本 操作 。 例 如 , 双 指 捏合 来 缩放 屏幕 内 容 , 左 右 滑 屏 进 行 翻 
页 ,上 下 滑 屏 替 代 了 视窗 上 的 上 下 滚动 条 ,在 手机 桌面 拖 电 应 用 图 标 。 

当然 ,移动 设备 的 人 机 交互 也 有 让 传统 用 户 不 适应 的 地 方 , 如 物理 键盘 被 软 键盘 替代 
了 。 虽 然 加 拿 大 手机 公司 的 Blackberry 手机 一 直 坚 持 使 用 物理 键盘 ,但 是 ,也 逐渐 被 用 户 
放弃 。 手 机 的 输入 方式 没有 在 桌面 计算 机 上 的 输入 速度 和 体验 好 ,所 以 ,移动 应 用 软件 的 
UI 设计 上 ,更 多 的 是 在 软 键盘 上 优化 ,例如 ,软件 输入 的 是 数字 , 软 键盘 在 有 限 的 屏幕 空间 
内 通过 去 掉 字 符 按钮 来 提供 更 大 的 数字 按钮 ; 如 果 输 入 的 是 网 址 或 电子 邮件 ,还 可 以 在 软 
键盘 中 增加 “@” 按 钮 和 “. COM” 按 钮 ,让 用 户 减少 字符 和 符号 软 键盘 间 的 切换 。 

移动 设备 不 仅 没有 了 物理 键盘 ,也 没有 了 鼠标 的 操作 ,人 的 手指 替代 了 鼠标 。 在 桌面 系 
统 上 ,鼠标 的 定位 精度 很 高 ,通常 可 以 在 几 个 像素 的 范围 内 ,但 是 ,人 的 手指 在 移动 设备 上 的 
定位 范围 是 很 粗 的 ,大 约 在 20 一 50 个 像素 ,这 就 是 为 什么 我 们 在 使 用 软 键盘 的 时 候 常常 会 
误 按 到 其 他 按钮 ,影响 了 输入 速度 。 所 以 在 UI 设计 上 要 使 用 较 大 的 按钮 和 图 标 来 满足 和 
提高 手指 单 击 的 体验 。 

此 外 ,移动 设备 的 屏幕 尺寸 比 桌 面 机 小 ,而 且 手 机 的 屏幕 尺寸 和 分 辨 率 大 小 还 有 不 同 ， 
所 以 在 UI 设计 上 也 是 重点 考虑 的 问题 之 一 。 虽 然 手机 的 屏幕 分 辩 率 已 经 在 向 桌面 计算 机 
靠拢 ,也 可 以 达到 桌面 显示 器 的 通用 分 辩 率 1920X1080, 但 是 在 一 个 Web 应 用 设计 中 还 是 
要 考虑 如 何 解 决 匹配 不 同 移动 设备 屏幕 尺寸 问题 。 例 如 ,在 布局 上 采用 流 式 布局 和 响应 式 
布局 ,把 在 桌面 计算 机 上 的 应 用 菜单 切换 成 按钮 ,总 之 ,在 移动 设备 上 ,应 尽 可 能 地 简化 交互 
的 UI 界面 ,但 又 不 能 牺牲 功能 和 内 容 。 

除了 键盘 、 鼠 标 、 屏 幕 的 因素 外 ,由 于 移动 设备 的 尺寸 较 小 ,在 硬件 设计 上 ,可 用 的 物理 
按钮 操作 就 很 少 。 例 如 ,iPhone 的 硬件 交互 按钮 只 有 音量 键 和 一 个 Home 键 , Home 键 可 
用 来 实现 很 多 功能 ,最 主要 的 功能 就 是 “返回 ”, 让 应 用 从 下 一 级 菜单 返回 到 上 一 级 菜单 ,或 
替代 移动 浏览 器 Web 页 面 的 “返回 ?按钮 。Android 系统 的 硬件 交互 在 设计 上 除了 Home 
键 外 ,还 有 “返回 " 键 。 所 以 ,移动 Web 应 用 的 UI 设计 也 要 考虑 不 同 移动 设备 的 物理 键 的 响 
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应 事件 来 完成 某 一 个 操作 。 例 如 ,常用 的 “返回 ” 键 设计 ,在 考虑 在 页 面 界面 上 有 “返回 ”按钮 
的 同时 ,还 要 充分 利用 不 同 移动 系统 的 物理 按钮 来 实现 同样 的 功能 。 

此 外 ,移动 设备 拥有 更 多 的 感应 器 硬件 , 像 陀 螺 仪 、 加 速度 仪 .电子 罗盘 、 光 线 感应 等 已 
经 成 为 基本 配备 ,这 些 硬件 已 成 为 互动 UI 设计 的 元 素 。 例 如 ,设备 旋转 让 屏幕 产生 的 竖 屏 
(Portrait)/ 横 屏 (Landscape) 的 UI 变 化 ， 摇 一 摇 ? 来 实现 两 个 手机 之 间 联 系 人 名 片 交换 ,这 
些 人 机 交互 的 设计 理念 都 是 应 用 移动 感应 器 件 实现 的 结果 。 

随 着 计算 机 软 硬 件 的 发 展 ,在 人 机 交互 领域 已 经 突破 了 传统 的 二 维 交互 界面 。 例 如 , 视 
频 技 术 和 图 像 识 别 技术 的 发 展 促进 了 三 维 的 手势 操作 ,微软 的 Kinect 游戏 体感 控制 ,让 用 
户 通过 身体 的 动作 来 与 计算 机 进行 游戏 互动 。 语 音 识别 技术 的 发 展 ,也 成 就 了 Apple 公司 
的 Siri 语音 助手 、 微 软 小 娜 Cortana 语音 秘书 、 百 度 地 图 、 淘 宝 网 的 语音 搜索 。 以 前 科幻 小 
说 家 的 虚拟 世界 已 经 开始 通过 VR(Virtual Reality, 虚 拟 现实 ) 技 术 实 现 。 虚 拟 现 实 技术 是 
一 种 可 以 创建 和 体验 虚拟 世界 的 计算 机 仿真 系统 , 它 利 用 计算 机 生成 一 种 模拟 环境 ,是 一 种 
多 源 信息 融合 的 交互 式 的 三 维 动态 视 景 和 实体 行为 的 系统 仿真 ,使 用 户 沉浸 到 该 环境 中 。 
用 户 完全 可 以 抛弃 人 机 交互 的 传统 工具 一 一 键盘 、 鼠 标 和 触摸 屏 , 通 过 VR 眼镜 进入 一 个 可 
以 去 感触 和 控制 的 虚拟 世界 。 目 前 ,人 机 交互 已 经 成 为 一 门 独立 的 学 科 , 已 经 跨越 了 传统 的 
计算 机 UI 设计 领域 。 








20.2 菜单 .导航 与 标签 栏 


菜单 .导航 栏 和 标签 栏 是 应 用 软件 中 最 常用 的 UI 元 素 , 也 是 原生 应 用 的 基础 控件 。 导 
航 栏 在 Web 网 页 设计 中 是 最 常用 的 一 个 UI 布局 方式 ,到 了 移动 时 代 , 这 个 经 典 的 界面 仍然 
是 最 流行 的 设计 。 但 是 ,传统 的 导航 栏 常常 作为 一 个 垂直 列 布局 ,在 移动 布局 的 设计 上 ,多 
采用 单列 布局 ,所 以 ,垂直 导航 栏 就 变 成 了 水 平 导航 栏 的 方式 。 如 图 20-2 所 示 为 淘宝 头条 
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图 20-2 淘宝 头条 的 水 平 导 航 栏 
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的 Web 应 用 的 水 平 导航 栏 。 导 航 栏 更 像 是 内 容 的 分 类 , 单 击 一 个 导航 项 都 会 引导 切换 到 布 
局 相同 但 内 容 不 同 的 视窗 。 

标签 栏 更 像 是 导航 栏 的 上 一 级 菜单 ,但 是 , 它 会 切换 到 不 同 布局 和 不 同 内 容 的 视窗 。 如 
图 20-3 中 ,淘宝 头条 的 客户 端 下 载 标签 栏 的 视窗 与 首页 视窗 是 不 同 的 布局 和 内 容 。 
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图 20-3 淘宝 头条 的 标签 栏 


移动 Web 应 用 仍然 保持 传统 的 下 拉 菜 单 , 但 是 ,菜单 只 有 一 级 ,而 且 菜 单 的 边 距 要 拉 
开 , 让 用 户 通过 手指 更 准确 地 触摸 单 击 菜单 项 。 如 图 20-4 所 示 是 知 乎 的 移动 Web 页 面 的 
下 拉 菜 单 。 
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20.3 图 标 、 按 钮 拟 物 化 设计 与 扁平 化 风格 


计算 机 的 图 标 、 按 钮 都 是 通过 模拟 现实 世界 的 外 观 来 引导 用 户 与 计算 机 的 交互 元 素 。 
但 是 ,把 计算 机 世界 里 面 的 所 有 元 素 都 过 度 地 追求 视觉 上 的 逼真 ,甚至 有 3D 的 效果 ,这 种 
过 度 的 拟 物 设计 方式 会 消耗 计算 机 的 资源 ,反而 会 影响 交互 功能 的 响应 和 体验 。 特 别 是 在 
Web 应 用 中 ,浏览 器 演 染 引擎 需要 调用 硬件 的 GPU 来 达到 视觉 上 的 现实 效果 ,因此 对 硬件 
的 要 求 越 来 越 高 。 拟 物化 设计 首先 是 由 操作 系统 兴起 的 ,例如 ,微软 的 Windows Vista 是 追 
求 视 觉 效 果 的 操作 系统 代表 ,但 是 由 于 兼容 性 等 问题 ,微软 的 Windows 升级 版 Windows 7 
和 10 都 回归 到 扁平 设计 风格 ,苹果 的 iOS 7 也 不 例外 。 

扁平 化 设计 风格 追求 的 是 简洁 ,去 掉 那 些 对 交互 没有 太 多 帮助 的 修饰 性 属性 ,让 计算 机 
的 交互 界面 不 再 装饰 成 真实 三 维 世 界 ,而 是 二 维 的 符号 来 表述 人 机 交互 的 界面 。 扁 平 化 设 
计 的 回归 更 是 得 益 于 计算 机 和 智能 移动 设备 的 普及 ,大 众 已 经 适应 了 菜单 .导航 栏 标签 栏 、 
图 标 等 交互 元 素 , 拟 物化 设计 有 低估 用 户 的 计算 机 操作 常识 ,反而 像 幼 儿 园 的 玩具 , 华 而 不 
实 。 正 是 由 于 人 类 在 与 计算 机 交互 上 的 进步 ,人 们 更 注重 于 交互 的 功能 ,而 不 是 华丽 的 外 
表 。 如 图 20-5 所 示 分 别 是 iOS 10 在 iPad mini 中 的 扁平 桌面 风格 和 锤子 手机 Smartisan 
OS 的 时 钟 拟 物 设计 风格 。 
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图 20-5” 拟 物化 与 扁平 化 设计 风格 


图 标 就 是 图 形 化 的 标签 ,常常 用 来 制作 应 用 的 标志 (Logo) 或 标签 栏 、 按 钮 的 图 形 化 设 
计 , 例 如 ,锤子 手机 操作 系统 的 电子 邮箱 设计 中 就 用 了 大 量 的 图 标 设 计 , 如 图 20-6 所 示 。 
图 标 在 UI 设计 中 已 经 有 一 些 行业 默认 标准 ,例如 , “五 角 星 ”代表 收藏 ,“ 头 像 ” 代 表 个 
人 账户 ,“ 垃 圾 桶 ”代表 删除 ,“ 放 大 镜 ” 代 表 搜索 ,“ 信 封 " 代 表 电 子 邮 件 , “齿轮” 代表 设 秆 等 。 
如 图 20-7 所 示 是 iOS 的 图 标 风格 。 

图 标 是 图 像 的 一 种 格式 ,有 像素 位 图 和 矢量 图 。 在 移动 Web UI 设计 中 ,建议 使 用 矢量 
图 图 标 , 矢 量 图 的 好 处 是 可 以 针对 屏幕 大 小 进行 缩放 时 ,图 像 不 会 失真 ,因为 矢量 图 保存 的 
是 数学 公式 的 画图 参数 和 画图 代码 ,而 像素 位 图 需要 根据 不 同 的 屏幕 大 小 来 裁剪 不 同 的 图 
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图 20-6 用 图 标 式 按钮 的 电子 邮件 应 用 


30 free vector icons 





图 20-7 常见 图 标 
(图 片 来 源 : http://www. lanrentuku. com/psd/tubiao/30-icons-chapps. html) 


像 大 小 ,因此 小 像素 的 图 片 放大 时 会 失真 。 

按钮 的 位 置 在 设计 中 也 是 非常 讲究 的 ,有 些 设计 是 因为 长 期 使 用 习惯 形成 的 ,也 就 是 习 
惯 成 自然 。 例 如 ,桌面 机 浏览 器 的 “向 后 ?按钮 在 左上 边 ， 向 前 ?按钮 设置 在 右上 边 。 在 移动 
应 用 设计 时 也 应 该 按照 习惯 ,把 “返回 "按钮 设计 在 左上 角 。 用 户 登 录 后 的 账号 管理 按钮 按 
习惯 是 在 视窗 的 右上 角 或 右 下 角 , 如 图 20-8 所 示 。 所 以 ,按钮 设计 不 要 太 标 新 立 异 ,违反 
习惯 。 
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< 详情 


Windows XP 阴魂 不 散 : 情愿 加 钱 维护 
也 不 升级 
数码 台 动 


尽管 微软 自 2014 年 4 月 开始 就 不 再 为 Windows XP 提 
供 官方 技术 支持 ， 但 这 款 操作 系统 至 今 仍 在 整个 Wi 
ndows 市 场 份额 中 占据 不 小 的 比例 。 


究 公司 Netmarketshare 的 最 新 统计 数据 
indows XP 目前 的 市 场 份额 仍 高 达 8.63% 
， 其 中 大 部 分 用 户 为 企业 和 政府 机 构 ， 这 些 用 户 其 
至 通过 支付 额外 费用 获得 这 款 系 统 的 支持 。 






其 它 Windows 家 族 成 员 方面 ，Windows 10 目 前 的 
份额 为 23.72%，Windows 7 仍然 高 达 47.1796。Wi 
ndows 束 体 份额 增加 了 1 个 百分点 ， 但 Windows 7 却 
下 滑 了 1 个 百分点 ，Windows 8/8.1 也 大 幅 下 滑 。 预 
计 这 一 趋势 将 延续 下 去 。 


Netmarketshare 研 究 人 员 预 计 ，Windows 10 的 市 





下 一 个 神 评论 名 等 你 了 Sw < 








Or 


电脑 因 能 数码 周边 
在 这 里 买 齐 柯南 的 全 套装 备 

在 这 里 买 齐 柯南 的 全 套装 备 

9 区 过 社 消 外 ”790 人 看 过 

迷彩 风格 : 华硕 发布 特种 部 “ 叶 沈 

队 主板 0 

作 和 信和 29 人 看 过 

Windows XP 阴魂 不 散 : 情愿 

加 钱 维护 也 不 升级 a 
2 ar 人 人 过 


wifi 太 慢 用 这 些 法 宝 ， 让 


WiFi 瞬 间 快 3 倍 





型 男 ” 明星“ 数码、 美容 母 : 十 


HTML 5+JavaScript 框 架 全 栈 App 开 发 





9:22AM -十 











图 20-8 ”淘宝 头条 的 “返回 "和 “我 的 ”按钮 位 置 


20.4 表单 


作为 数据 输入 的 交互 元 素 , 在 移动 UI 界面 中 应 尽量 
减少 键盘 输入 项 ,如 果 必 须 使 用 键盘 输入 ,尽量 采用 
HTML 5 的 输入 类 型 属性 。 例 如 ,电子 邮件 输入 定义 输 
入 属性 type 二 "email" , 软 键盘 会 提供 “. com” 和 “@” 按 钮 ， 


简化 输入 。 


移动 表单 输入 更 多 采用 滚轮 输入 方式 来 替代 键盘 输 
入 。 如 图 20-9 所 示 为 采用 滚轮 输入 日 期 。 


20.5 表格 


在 移动 设备 中 显示 表格 是 一 个 不 好 的 体验 效果 ,但 是 可 以 采用 以 下 方法 解决 移动 表格 


显示 问题 。 


(1) 通过 过 滤器 ,让 用 














(2) 通过 纵向 滑动 浏览 表格 。 
F 数 据 量 大 的 表格 ,可 以 作成 翻 页 显示 。 
(4) 用 列表 代替 表格 。 
(5) 将 表格 转换 成 图 片 方式 显示 ,这样 可 以 通过 图 片 的 缩放 来 浏览 表格 。 
(6) 用 图 表 , 例 如 饼 型 图 、 棒 型 图 来 替代 表格 显示 数据 。 


(3) 对 村 








20-9 日 期 的 滚轮 输入 效果 


户 选 择 主 要 列 显示 ,而 不 是 显示 整 张 表 。 
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20.6 jQuery Mobile 类 库 


jQuery 是 一 个 流行 的 JS 组 件 库 ,提供 一 种 更 简洁 的 JavaScript 代码 编写 风格 ,通过 
CSS 选择 器 快速 查询 .获取 DOM 元 素 对 象 ,更 便捷 地 操作 DOM 元 素 ,修改 页 面 内 容 。 此 
外 ,还 有 增强 的 事件 处 理 能 力 ,漂亮 的 页 面 动 态 效果 ,及 各 种 丰富 的 UI 组 件 ,例如 ,日 历 组 
件 等 ,并 减少 浏览 器 兼容 问题 。 

jQuery Mobile 是 针对 移动 Web 应 用 程序 的 框架 组 件 , 通 过 使 用 HTML 5 和 CSS 3 以 
尽 可 能 少 的 脚本 对 页 面 进行 移动 布局 和 UI 优化 ,增加 了 针对 移动 端 浏览 器 的 事件 处 理 , 例 
如 ,触摸 、 滑 动 、 定 位 等 事件 。 


20.6.1 jQuery Mobile 的 设计 风格 


jQuery Mobile 的 设计 风格 是 引入 了 HTML 5 的 自 定义 属性 “data- * ”, 给 一 个 页 面 做 
语义 化 布局 ,用 data-role 二 "page" 定 义 一 个 独立 页 面 , data-role 二 "header" 定 义 标题 栏 ， 
data-role 二 "footer" 定 义 页 脚 栏 , data-role 二 "content" 定 义 内 容 栏 。 这 里 的 data-role 二 
"page" 可 以 在 一 个 物理 页 面 文 件 中 虚拟 多 个 div 块 作为 移动 的 页 面 ,不 用 通过 手机 移动 设 
备 在 一 个 物理 页 上 下 移动 阅读 ,而 是 把 一 个 物理 页 面 虚拟 成 多 个 页 面 ,通过 翻动 页 面 来 阅 
读 。 如 下 代码 是 把 一 个 div 块 定义 成 一 个 虚拟 的 页 面 ,例子 20-1 中 定义 了 两 个 虚拟 页 面 ， 
并 可 以 相互 跳 转 。 代 码 如 下 。 








< div data— role= "page"> 例子 20-1: 
<div data- role= "header"> part3/ch20/jqm. html 
< hl > 标题 栏 </hl > 
</div> 
<div data— role= "content"> 
<p> 这 是 第 一 页 内 容 </p> 
</div> 
<div data— role= "footer"> 
< hl > 页 脚 栏 </hl > 
</div> 
</div> 











通过 data-transition 属性 ,可 以 在 移动 设备 的 页 面 跳 转 添加 HTML 5 的 过 渡 效 果 , 代 
人 码 如 下 。 





<a href ="#page2"data-transition = "flip"> 第 二 页 <a/> 











过 渡 效 果 有 下 面 几 种 方式 , 见 表 20-1。 
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表 20-1 datartransition 的 过 渡 效 果 值 

过 渡 值 说 明 过 渡 值 说 明 
fade (默认 值 ) 淡 入 淡出 效果 slidefade 滑动 并 淡 入 效果 
flip 翻动 效果 slideup 从 下 到 上 滑动 效果 
flow 抛 出 效果 slidedown 上 到 下 滑动 效果 
pop 弹出 窗口 效果 turn 转向 下 一 页 
slide 滑动 效果 none 无 过 渡 效果 

















过 渡 是 有 方向 性 的 ,如 果 过 渡 是 从 左 到 右 , 用 data-direction 二 "reverse" 可 以 改变 过 渡 
的 方向 ,代码 如 下 。 








<a href ="#page2"data— transition = "flip" data- direction = "reverse" > 第 二 页 <a/> 





20.6.2 


jQuery Mobile UI 控件 


按钮 是 最 常用 的 控件 ,通过 属性 data-role 王 "button" 定 义 , 除 了 HTML 定义 的 具有 按 
钮 性 质 的 标签 ,例如 < button > 和 < input >, 通 常 是 在 <a > 标签 上 定义 一 个 按钮 ,外 观 的 控制 
由 data-corners( 圆 角 ) data-mini( 小 型 ) .data-shadow( 阴 影 ) 的 布尔 值 属性 决定 ,还 可 以 通 
过 data-icon 属性 给 按钮 加 图 标 。 如 果 按 钮 由 文字 和 图 标 组 成 ,还 可 以 通过 data-iconpos 属 
性 值 top bottom right left 定义 图 标 在 文字 的 上 下 左右 出 现 。 如 表 20-2 所 示 列 出 了 常用 

















图 标 。 
表 20-2 按钮 图 标 data-icon 属性 值 
图 标 值 说 明 图 标 值 说 明 

data-icon= "arrow-l" 左 箭头 data-icon= "back" 返回 
data-icon= "arrow-r" 右 箭头 data-icon= "search" 搜索 
data-icon= "delete" 删除 data-icon= "grid" 网 格 
data-icon= "info" 信息 data-icon= "plus" 十 符号 
data-icon= "home" 首页 

















按钮 代码 如 





</div> 





<div data— role= "header"> 
< hl > 标题 栏 </hl > 
<a href =" 间 home" data- icon = "home"> 首 页 </a> 
< input type = "button" data - icon = "search" class = "ui— btn— right"></input > 





页 眉 data-role 二 "header" 可 包含 一 个 或 两 个 按钮 ,页 脚 
data-role 一 "footer" 没 有 限制 。 但 是 页 眉 里 面 如 果 有 文字 ,要 
用 class 二 "ui-btn-right" 来 让 第 二 个 按钮 移 到 右边 ,显示 效果 


见 例子 20-2。 


EE 
例子 20-2: 
Part3/ch20/jqgm-button. html 
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导航 栏 data-role 王 "navbar" 里 面 封 装 了 < ul ><1i>< a > 标签 作出 的 导航 列表 ,导航 栏 
里 面 的 导航 条 均匀 分 布 在 水 平 线 上 ,最 大 容纳 5 个 导航 条 , 超 
过 5 个 会 自动 分 成 两 列 。 像 按钮 一 样 ,导航 条 可 以 添加 data- ”例子 20-3: 
icon 图 标 ,图 标 默认 位 置 在 上 方 ,也 可 以 通过 data-iconpos 改 Part3/ch20/iqm-navbar. htm] 
写 图 标的 位 置 。 导 航 栏 可 以 分 别 散 入 到 页 眉 、 页 脚 和 内 容 栏 
里 面 。 见 例子 20-3 ,部 分 代码 如 下 。 














< div data— role= "header"> 
<div data- role= "navbar"data — iconpos = "left"> 
<ul> 
<1i><a href ="#"data- icon = "home"> 首 页 </a></1i> 
<1i><ahref="#"data- icon = "search" > 教程 </a></1i> 
<1li><a href ="#"data- icon= "info" > 我 们 </a></1i> 
</ul> 
</div> 
</div> 











jQuery Mobile 框架 还 给 HTML 传统 的 列表 和 表单 进 【EREEEEEEE 
行 了 外 观 优化 来 适应 移动 设备 要 求 , 通 过 在 列表 标签 < ol > 或 例子 20-4: 
< ul> 中 添加 属性 data-role 二 "listview" ,及 表单 通过 用 带 有 part3/ch20/jqm-form. html 
data-role 一 "fieldcontain" 属 性 的 < div > 或 < fieldset > 域 容器 
元 素来 封装 label 或 表单 元 素 。 见 例子 20-4 ,部 分 代码 如 下 。 





< form method = "post" action="#"> 
< div data- role= "fieldcontain"> 
< label for = "name"> 名 字 :</label> 
< input type = "text" name = "name" id = "name"> 
< label for = "passw"> 密 码 :</label > 
< input type = "password" name = "passw" id = "passw"> 
</div> 











20.6.3 jQuery Mobile 移动 事件 


除了 标准 的 jQuery 事件 外 ,jQuery Mobile 还 有 专 为 移动 浏览 器 和 触摸 屏 制 定 的 事件 。 

(1) 触摸 事件 : 单 击 和 滑动 触摸 屏幕 时 触发 。 

(2) 滚动 事件 : 页 面 上 下 滚动 时 触发 。 

(3) 方向 事件 : 设备 旋转 移动 时 触发 。 

(4) 页 面 事件 : 当 页 面 创 建 、 加 载 或 印 载 时 触发 。 

和 触摸 事件 相当 于 台式 计算 机 的 鼠标 单 击 , 按 住 鼠标 左 键 并 移动 鼠标 相当 于 触摸 屏 的 滑 
动 , 这 些 动 作 事件 可 以 用 台式 计算 机 的 鼠标 模拟 完成 测试 。 

触摸 事件 主要 有 以 下 几 种 , 表 20-3 是 触摸 事件 的 名 称 。 
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表 20-3 触摸 事件 的 值 


























触摸 事件 说 明 触摸 事件 说 明 
tap 单 击 触摸 swiperight | 从 左 向 右 滑动 超过 30px 时 被 触发 
taphold 单 击 并 保持 1 秒 钟 swipeleft 从 右 向 左 滑动 超过 30px 时 被 触发 
swipe 水 平滑 动 超过 30px 时 被 触发 





触摸 事件 的 触发 代码 很 简单 ,通过 选择 器 函数 $ (获取 到 HTML 标签 元 素 对 象 ,调用 
事件 函数 on() 来 处 理 响应 事件 。 代 码 如 下 。 





$ ("p").on("swiperight", function(){alert("You swiped right! ");}); 








滚动 事件 可 以 分 成 两 个 事件 : 内 容 滚动 开始 (scrollstart) 和 滚动 结束 (scrollstop)。 但 
是 ,scrollstart 在 iOS 上 还 无 法 实现 。 代 码 如 下 。 





$ (document). on("scrollstart",function(){alert(" 开 始 滚动 !");}); 











注意 : 上 面 代 码 中 的 jQuery 选择 器 参数 是 document 对 象 ,表示 整个 页 面 的 滚动 事件 。 

方向 事件 orientationchange 是 移动 设备 在 垂直 或 水 平方 向 旋转 时 触发 ,触发 事件 对 应 
的 对 象 是 window ,通过 window. orientation 来 获取 设备 的 方向 状态 是 横 屏 还 是 竖 屏 ,代码 
如 下 





$ (window). on("orientationchange" ,function() 
{ if (window. orientation == 0 || window.orientation == 180){ 
Alert( 'portrait');} 
else if (window. orientation == 90 || window.orientation == 一 90){ 
alert( 'landscape');}}); 











页 面 事件 被 分 为 以 下 4 个 方面 。 

(1) 当前 页 面 打 开 及 jQuery Mobile 完成 页 面 初始 化 ; 

(2) 当 外 部 页 面 加 载 或 印 载 ,及 加 、 印 载 失 败 ; 

(3) 当 页 面 跳 转 过 渡 前 后 ， 

(4) 当 页 面 被 更 改 ,或 更 改 失败 。 

jQuery Mobile 把 一 个 页 面 的 创建 分 成 三 个 阶段 (例子 20-5): 创建 前 、 创 建 时 和 jQuery 
Mobile 已 完成 页 面 增强 的 初始 化 工作 。 代 码 如 下 。 








$ (document). on("pagebeforecreate", function(event){ 例子 20-5: 
a bi ")}); Part3/ch20/jqgm-event. html 

$ (document). on("pagecreate", function(event){ Ek 
alert(" 触 发 pagecreate 事件 !");}); 

$ (document). on("pageinit", function(event){ 
alert(" 触 发 pageinit 事件 !")}); 
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练习 


1. 字体 图 标 是 制作 Web UI 的 最 基本 组 件 ,互联 网 上 有 许多 免费 的 字体 图 标 库 , 例 如 ， 
http://fontawesome. io/ ,一 个 字库 里 面 有 675 个 字体 图 标 , 学 习 下 载 使 用 这 些 图 标 , 创 建 
按钮 .菜单 .导航 栏 。 

2. Bootstrap 提供 了 包括 二 百 五 十 多 个 来 自 Glyphicon Halflings 的 免费 字体 图 标 ( 见 : 
http://v3. bootcss. com/components/)。 使 用 字体 图 标定 义 < span class 一 "glyphicon 
glyphicon-plus” aria-hidden 王 "true"></span >, 表 示 添 加 一 个 “十 图标。 请 编写 代码 比较 
jQuery Mobile 提供 的 按钮 图 标 data-icon 二 "plus" 和 “十 ”图 标的 差别 。 

3. jQuery Mobile 默认 有 5 个 主题 模板 a~e, 在 互联 网 上 还 有 很 多 免费 的 主题 ,学 习 下 
载 安装 一 个 jQuery Mobile 的 主题 。 
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第 421 


地 理 位 置 检测 


21.1 地 理 位 置信 息 


地 理 位 置信 息 主要 是 由 经 纬度 组 成 ,经 纬度 是 地 球 的 坐标 ,地 球 有 一 个 假想 的 旋转 地 
轴 , 相 当 于 一 条 通过 地 球 南北 两 极 和 地 球 中 心 的 线 ,赤道 就 是 在 地 球 腰 中 间 画 一 个 与 地 轴 垂 
直 的 圆圈 , 沿 着 赤道 再 向 地 球 南北 两 边 画 出 许多 和 赤道 平行 的 圆圈 ,就 是 纬 线 。 纬 度 定义 为 


地 球面 上 一 点 到 球 心 的 连 线 与 赤道 平面 的 夹 角 。 所 
以 ,赤道 的 纬度 为 零度 ,向 南北 极 各 为 90" ,位 于 赤道 
以 南 的 叫 南 纬 , 记 为 “S”, 位 于 赤道 以 北 的 叫 北纬 , 记 
为 “N”。 

绕 着 北极 点 到 南极 点 画 出 许多 与 地 球 赤 道 垂直 
的 圆圈 ,就 叫 经 线 。 国 际 上 规定 经 过 英国 伦敦 的 格 
林 尼 治 天 文 台 的 经 线 作为 起 点 零度 ,向 东 面 的 为 东 
经 , 共 180"; 向 西 面 的 为 西 经 , 共 180"。 东 经 180" 和 
西 经 180" 又 回 到 经 度 起 点 。 如 图 21-1 所 示 是 通过 
http://www. gpsspg. com/maps. htm 网 站 查询 一 
个 位 置 的 经 纬度 信息 。 

HTML 5 提供 了 Geolocation API, 用 来 计算 地 
理 位 置信 息 的 经 纬度 海拔、 精确 度 、 移 动 速度 等 。 


21.2 ”地理 位 置 检测 方法 














谷歌 地 图 : 22.7445565359,108.4716962995 
百度 地 图 : 22.7508510000,108.4781170000 
腾讯 高 逢 : 22.7445337197,108.4716836536 
图 吧 地 图 : 22.7429170297,108.4658444436 
谷 葡 地 球 : 22.7473170297,108.4676944436 
北纬 N22"44'50.34" 东经 E108°283.70” 


靠近 : 广西 壮族 自治 区 南宁 市 名 宁 区 八 尺 江 路 


参考 : 广西 自治 区 南宁 市 沁 宁 区 薄 庙 镇 公 曹 村 西方 
向 


良 庆 针 r La 二 于 


21-1 一 个 地 理 位置 的 经 纬度 








检测 地 理 位 置 有 多 种 方法 , 见 表 21-1。 早 期 的 台式 计算 机 用 人 P, 移 动 设备 用 无 线 网 络 、 
手机 基站 、GPS 全 球 定位 。 如 果 是 手机 的 GPS 定位 ,浏览 器 可 以 直接 获取 经 纬度 等 数据 ,如 
果 没 有 GPS ,浏览 器 通过 IP 地 址 及 手机 基站 的 信息 ,发 送 到 代理 位 置 定位 服务 器 ,例如 ， 
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Google 位 置 服务 器 ,以 计算 出 经 纬度 值 。 地 理 位 置信 息 可 以 应 用 在 购物 、 地 图 、 导 航 、 拍 照 
定位 、 防 诈骗 、 定 向 广告 .游戏 等 方面 。 


表 21-1 地 理 位 置 检测 方法 























检测 方法 精 确 度 优 缺 点 
靠 位 置 服务 器 提供 计算 ,不 可 靠 。 成 本 低 ,不 需要 任何 
IP 城市 ,单位 区 域 级 附加 设备 
Wi-Fi 网 络 ,蓝牙 ,RFID |20m 可 以 用 于 室内 定位 。 户 外 效果 不 好 
手机 基站 三 个 基站 定位 ,100m | 户外 、 室 内 都 可 以 定位 ,需要 手机 网 络 , 非 免费 服务 
室内 效果 不 好 ,需要 附加 GPS 设备 功能 ,适合 野外 没有 
GPS 全 球 定位 10m 任何 网 络 的 地 方 





21.3 Geolocation API 


地 理 位 置信 息 对 象 是 navigator 对 象 下 面 的 子 对 象 , 即 navigator. geolocation , 它 包 含 两 
个 获取 位 置 的 方法 ,一 种 是 异步 请 求 获 取 定 位 getCurrentPosition() ,这 种 定位 方法 可 以 快 
速 返 回 基 于 IP 或 Wi-Fi 定位 的 低 精度 数据 ,但 是 ,如 果 是 
GPS 设备 下 定位 ,可 以 通过 参数 选择 高 精度 数据 ,这 样 定位 例子 21-1: 
时 间 会 长 些 。 另 一 种 是 轮 询 调用 定位 watchPosition() , 轮 询 ” Part3/eh21/geolocation. html 
定位 是 不 断 更 新 位 置 的 变化 信息 ,更 适用 于 导航 。 具 体 详细 
定义 见 表 21-2。 





表 21-2 geolocation 方法 
geolocation 方法 说 明 
onsuccess 回调 函数 返回 一 个 position 对 象 ， 
可 选 onerror, 以 及 参数 设置 positionOption 
轮 询 探 测 位 置 ,方法 本 身 返 回 wid 监视 器 对 
象 ,其 他 参数 和 上 面 方法 一 样 
clearWatchCwid) 通过 wid 停止 轮 询 探测 





getCurrentPosition(onsuccess, onerror, positionOption) 





wid= watchPosition(onsuccess,onerror, positionOption) 











getCurrentPosition() 和 watchPosition() 都 接收 一 个 成 功 回 调 函 数 , 一 个 可 选 的 失败 回 
调 函 数 和 一 个 可 选 的 PositionOptions 参数 设置 对 象 。 可 选 参数 对 象 是 一 个 JSON 对 象 , 包 
含 的 属性 见 表 21-3。 


表 21-3 ”PositionOptions 参数 设置 对 象 属性 














PositionOptions 对 象 属性 说 明 
enableHighAccuracy true/flase, 高 精度 设置 

timeout 毫秒 ,超时 

maximumAge 当前 的 position 信息 有 效 期 ,ms 








onsuccess 返回 的 position 对 象 中 包含 coords 坐标 子 对 象 及 其 属性 见 表 21-4。 
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表 21-4 ”position 对 象 属性 
































position 的 属性 说 明 
coords. latitude 纬度 ,一 90.00 一 十 90.00 
coods. longitude 经 度 , 一 180. 00 一 十 180. 00 
coords. altitude 海拔 高 度 ,m 
coords. accuracy 纬度 ,经 度 精确 度 ,m 
coords. altitudeAccuracy 海拔 高 度 精确 度 ,m 
coords. heading 以 正 北 为 基准 , 顺 时 针 移动 的 角度 
coords. speed 移动 速度 ,m/s 
position. timestamp 获取 地 理 位 置 的 时 间 戳 





onerror 返回 的 positionError 对 象 属 见 表 21-5 。 
表 21-5 ”positionError 对 象 属性 


























positionError 的 属性 说 明 
错误 代码 
0 一 unkown error, 未 知 错误 
code 1 一 permission denied ,访问 服务 被 拒绝 
2 一 position unavailable, 联 网 中 断 
3 一 timeout, 超 时 
message 错误 信息 


通过 例子 20-1 来 获取 地 理 位 置信 息 可 能 会 出 现 一 些 问 题 ,在 PC 上 测试 ,建议 将 代码 放 
到 Web 服务 器 端 并 连接 互联 网 ,使 用 国产 搜狗 浏览 器 访问 http://localhost/geolocation. 
html, 具 体操 作 见 33 章 33. 3. 2 节 。 主 要 代码 如 下 : 





function onsuccess(position) { 
var lat = position. coords. latitude; 
var lon = position. coords. longitude; 
} 
function onerror(positionError) { 
alert('ERROR:' + positionError.code + ': ' + positionError.message); 
}; 
var positionOptions = { 
enableHighAccuracy : true, 
maximumAge : 1330000, 
timeout : 26000 
I 
navigator. geolocation. getCurrentPosition(onsuccess, onerror, positionOption); 











21.4 ”地 理 位 置 与 地 图 接口 


获取 的 地 理 位 置信 息 , 是 纬度 经 度 和 海拔 高 度 的 抽象 数据 ,但 是 可 以 通过 一 些 地 图 
API, 在 地 图 上 显示 具体 位 置 。 常 用 地 图 服务 商 见 表 21-6。 
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表 21-6 提供 地 图 服务 的 一 些 公司 























地 图 服务 商 说 明 
Google Maps API 最 好 的 地 图 服务 
Bing Maps API 大 公司 ,但 对 中 国 地 图 服务 内 容 少 
高 德 地 图 API 比较 专业 的 地 图 服务 ,导航 服务 最 好 
百度 Map API API 文 档 全 ,服务 功能 多 ,应 用 全 
腾讯 Map API 移动 开发 API 还 没有 开放 ,应 用 方面 案例 不 多 ,但 是 接口 简单 易学 





按 开发 分 类 ,地 图 服务 商会 提供 自己 的 移动 API, 包 括 Android 和 iOS 的 API, Web 开 
发 的 JavaScript API 和 URI API, 以 及 一 些 其 他 服务 和 工具 。 按 服务 分 类 ,可 以 是 地 图 服 
务 、 导 航 服务 、 街 景 服务 等 。 使 用 地 图 提供 商 的 开发 API 可 以 提供 定位 精度 ,但 是 ,地 图 服 
务 商都 会 要 求 开发 者 注册 并 申请 一 个 开发 密 钥 key, 在 加 载 开 发 API 包 时 需要 用 key 作为 
参数 。 例 如 ,腾讯 的 开发 key 在 Web 开发 中 调用 代码 如 下 。 





< script charset = "utf — 8"src = "http://map. qq. com/api/js?v = 2. expgkey = YOUR_KEY"></script > 











其 中 的 your_key 就 是 开发 密 钥 。 使 用 地 图 服务 虽然 免费 ,但 是 有 次 数 限制 ,作为 商业 
用 途 , 选 择 付费 可 以 解除 次 数 限制 。 但 是 ,大 多 数 地 图 服务 商 对 URI API 是 不 用 注册 和 申 
请 密 钥 的 ,可 以 按照 一 定 的 URI 格式 调用 地 图 服务 。 使 用 URI API 可 以 把 上 面 通过 
Geolocation API 获取 的 经 纬度 数据 直接 调用 地 图 ,显示 地 理 位 置信 息 , 将 抽象 的 地 理 位 置 
数据 信息 转换 成 地 图 。 

URI API 提供 以 下 服务 。 

(1) 地 点 标注 : 根据 经 纬度 数据 ,调用 URI 地 图 服务 展示 一 个 标注 点 ,分 享 位 置 ,标注 

(2) POI( 地 点 ) 检 索 : 以 当前 位 置 (经 纬度 数据 ) 为 中 心 ,在 周边 半径 1km 范围 ,根据 关 
键 字 进 行 地 图 检索 ,通过 地 图 显示 POI 检索 结果 的 详细 信息 页 。 

(3) 公交 线路 查询 : 根据 线路 名 称 ,通过 地 图 显示 公交 线路 图 。 

(4) 线路 导航 : 根据 起 点 、 终 点 名 称 或 经 纬度 数据 ,显示 地 图 道路 路 径 。 

(5) 地 址 解析 : 根据 经 纬度 查询 地 址 ,或 地 址 信息 查询 坐标 ,通过 地 图 服务 展示 该 位 置 。 

下 面 介绍 腾讯 和 百度 地 图 URI API 结合 Geolocation API 的 使 用 方法 。 


21.4.1 腾讯 地 图 的 URI API 


URI API 是 一 组 用 于 打开 腾讯 地 图 网 站 或 者 打开 用 户 手机 上 安装 的 腾讯 地 图 产品 的 
协议 接口 ,一 般 在 第 三 方 网 站 或 应 用 中 需要 用 到 地 图 相关 的 功能 时 ,可 以 通过 这 套 接口 启动 
腾讯 地 图 产品 的 不 同 功 能 模块 ,为 用 户 提供 地 图 及 导航 服务 。 

调用 腾讯 Web/ Wap 版 地 图 URI 接口 格式 ,代码 如 下 。 





http://apis. map. qq. com/uri/v1/method?param = value[ &param = value&..] 























其 中 ,method 方法 的 值 是 对 应 的 服务 项 目 。 
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(1) Search: 地 点 搜索 ,周边 搜索 。 

(2) Routeplan: 路 线 导 航 。 

(3) Geocoder: 地 址 解析 。 

(4) Marker: 地 点 标注 。 

(5) Streetview: 街景 展示 。 

这 里 用 Marker 地 点 标注 作为 应 用 例子 。 地 点 标注 URI 要 求 至 少 两 个 参数 : marker 和 
referer。referer 是 应 用 名 称 ,必须 填写 ; marker 属性 用 键 值 对 表示 ,属性 之 间 用 分 号 分 隔 。 
属性 有 以 下 几 个 。 

(1) Coord: 经 纬度 ,value 形式 为 “lat,lon”。 纬 度 在 前 ,经 度 在 后 。 必 填 。 

(2) Title: 标注 点 名 称 ,例如 公司 ,单位 或 店铺 名 称 。 必 填 。 

(3) Addr: 具体 的 街道 地 址 。 必 填 。 

(4) Tel: 电话 。 可 选项 。 

(5) Uid: 指定 一 个 POI 的 唯一 标识 。 可 选项 。 例子 21-2: 

根据 以 上 参数 , 抓 取 到 的 经 纬度 变量 为 lat 和 lon, 下 面 。 Part3/eh21/mapit. html 
的 代码 用 来 显示 所 在 位 置 标识 , 见 例子 21-2。 











"http://apis. map. qq. com/uri/v1i/marker?marker = coord:" + lat +"," + lon+ ";title: 南 宁 学 院 ; 
addr: 龙 亭 路 8 号 sreferer = web 地 图 "; 











21.4.2 百度 地 图 服务 的 URI API 


百度 地 图 URI API 是 为 开发 者 提供 直接 调 取 百度 地 图 产品 (百度 Web 地 图 .百度 地 图 
手机 客户 端 ) 以 满足 特定 业务 场景 下 应 用 需求 的 程序 接口 ,开发 者 只 需 按照 接口 规范 构造 一 
条 标准 的 URI, 便 可 在 PC 和 移动 端 浏览 器 或 移动 开发 应 用 中 调 取 百 度 地 图 产品 ,进行 地 图 
展示 和 检索 .线路 查询 .导航 等 功能 ,无 须 进行 复杂 的 地 图 功能 开发 。 该 套 API 免费 对 外 开 
放 ,无须 申请 ak 。 
目前 ,百度 的 URI API 是 2. 0 版 本 ,地 点 标注 URI 的 调用 接口 是 : 





http://api. map. baidu. com/marker?param = value[ &param = value&..] 











地 址 标注 marker 的 参数 值 用 等 号 “二 ”连接 ,下 面 是 具体 参数 。 
(1) Location: lat < 纬度 >,1ng < 经 度 >, 必 填 。 


(3) Content: 标注 点 显示 内 容 , 例 如 ,公司 介绍 。 可 选项 。 

(4) Output: 输出 类 型 ,Web 应 用 必须 指定 值 为 “Yhtml”。 必 填 。 
(5) Src: 应 用 名 称 。 必 填 。 

一 个 地 点 标注 引用 代码 如 下 。 





"http://api. map. baidu. com/marker?location=" +lat+","+lon+"&title= 我 的 位 置 &content 
= xx 学 院 &output = html&src = web 地 图 "; 
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练习 


1. 修改 例子 21-1 的 代码 ,将 getCurrentPosition() 替 换 成 watchPosition() , 变 成 一 个 
导航 应 用 。 

2. 去 腾讯 位 置 服务 申请 开发 密 钥 : http://lbs. qq. com/guides/startup. html, 通 过 地 
图 组 件 (H5)-> 地 图 选 点 组 件 ,做 一 个 类 似 微 信 中 的 “发 送 位 置 ”功能 。 


第 422)》 章 


移动 设备 其 他 功能 接口 


22.1 摄像 头 API 


浏览 器 厂商 开始 加 入 了 摄像 头 接口 ,让 Web 应 用 可 以 像 原 生 应 用 一 样 访问 摄像 头 。 目 
前 的 接口 不 仅仅 是 针对 移动 设备 的 ,桌面 设备 也 将 实现 同样 的 摄像 头 接口 。 

getUserMedia API 有 两 种 方法 调用 : navigator. getUserMedia 和 navigator. 
mediaDevices. getUserMedia。 前 一 种 方法 是 早期 的 设计 ,需要 在 方法 前 面 加 浏览 器 前 级。 
后 一 种 方法 就 不 需要 ,只 要 浏览 器 支持 ,统一 了 接口 ,代码 更 简单 。 但 是 ,为 了 安全 ,需要 
HTTPS 访问 摄像 头 服务 ,所 以 需要 SSL 证 书 来 协同 API 工作 。 

HTML 代码 如 下 。 





< video id = "video" width = "640" height = "480" autoplay></video> 
< button id = "snap"> 照 相 </button> 
< canvas id = "canvas" width = "640" height = "480"> </canvas > 











video 标签 用 来 播放 来 自 摄像 头 的 视频 , 单 击 “ 照 相 ” 的 按钮 后 ,将 抓 取 的 照片 放 到 
canvas 标签 里 面 显 示 。JavaScript 的 代码 比较 简单 ,getUserMedia() 带 一 个 JSON 格式 的 
参数 {video:true,audio:true) ,来 决定 对 视频 或 音频 的 抓 捕 。 然 后 ,从 设备 抓 取 的 视频 数据 
流 stream 通过 window. URL. createObjectURL(Cstream) 转 变 成 视频 源 ,代码 如 下 。 





if(navigator.mediaDevices && navigator. mediaDevices. getUserMedia) { 
navigator. mediaDevices. getUserMedia( { video: true }).then(function( stream) { 
video. src = window.URL.createObjectURL(stream); 
video. play( ); 
1D);} 
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拍照 功能 ,是 把 video 里 面 的 内 容 放 到 canvas 里 面 画 图 ,代码 如 下 。 





var canvas = document. getElementById( 'canvas'); 

Var context = canvas.getContext('2d'); 

var video = document. getElementById( 'video'); 

document. getElementById( " snap"). addEventListener ("click", function() {context. drawImage 
(video, 0, 0, 640, 480);}); 











拍照 的 完整 代码 见 例子 22-1。 em 
例子 22-1: 
part3/ch22/camera. html 


22.2 设备 移动 方向 API 


在 移动 设备 中 ,加 速度 计 、 陀 螺 仪 .指南 针 ( 罗 盘 ) 是 检测 设备 移动 的 基本 硬件 。 大 多 数 
智能 移动 设备 都 已 经 是 基本 配备 ,可 以 用 于 控制 游戏 ,手势 识别 和 定位 测量 。 原 生 应 用 接口 
也 很 完善 ,对 于 Web 应 用 ,HTML 5 提供 了 这 些 硬件 接口 标准 ,目前 大 多 数 移动 浏览 器 支 
持 这 个 接口 。 


22.2.1 设备 方向 与 alpha .beta gamma 定位 值 
设备 旋转 移动 由 三 个 坐标 XYZ 控制 ,如 下 表示 。 
(1) X 轴 方 向 是 从 东 到 西 水 平方 向 , 往 东方 向 为 正 值 。 
(2) Y 轴 方 向 是 从 北 到 南方 向 , 往 北方 向 为 正 值 。 
(3) Z 轴 方 向 是 从 上 到 下 方向 , 往 上 方向 为 正 值 。 
坐标 轴 起 点 在 设备 屏幕 水 平 放 时 ,位 于 屏幕 的 中 心 位 置 , 如 图 22-1 所 示 。 
这 时 ,X,Y,Z 的 取 值 如 下 。 z 
(1) X: 沿 屏幕 水 平方 向 , 往 右 为 正 值 。 
(2) Y: 沿 屏幕 水 平方 向 , 往 前 为 正 值 。 
(3) Z: 沿 屏幕 上 面 方向 , 往 上 为 正 值 。 
其 中 有 三 个 针对 每 个 轴 旋 转 的 属性 如 下 。 X 
(1) alpha: 围 绕 Z 轴 旋转 的 角度 值 , 当 设备 顶 
端 指向 正 北方 向 时 ,该 属性 的 取 值 为 0。 从 指向 


图 22-1 X,Y,Z 轴 的 取向 
Ee 方 人 顺 时 针 旋转 ,角度 增加 。 取 值 范围 “图 片 米 源 https//wf uisde com/eaydevice 
0, 360)。 


access/device-orientation/index. html) 


(2) beta: 围 绕 X 轴 前 后 旋转 的 角度 值 , 当 设 
备 与 地 球 表面 保持 平行 时 ,该 属性 的 取 值 为 0。 当 设备 顶部 翘 起 ,高 于 地 球 水 平面 ,角度 增 
加 。 取 值 范围 (一 180，180) 。 
(3) gamma: 围 绕 Y 轴 旋 转 的 角度 值 , 当 设备 的 左右 两 边 
与 地 球 表面 保持 平行 时 ,该 属性 的 取 值 为 0。 设备 右边 疾 起 。 例子 22-2: 
高 于 地 球 水 平面 ,角度 增加 。 取 值 范围 (一 90, 90) 。 part3/ch22/deviceorientation. 
角度 属性 示意 如 图 22-2 所 示 。 Bd 
先 将 例子 22-2 的 文件 复制 到 Web 服务 器 ,通过 手机 浏览 器 
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图 22-2 绕 Z,X,Y 轴 旋转 的 alpha,beta,gamma 的 角度 属性 
(图 片 来 源 : https://msdn. microsoft. com/en-us/library/dn433240(v=vs. 85). aspx) 


连接 到 服务 器 (参见 27. 3.4 节 , 通 过 手机 访问 apache Web 服务 器 ) 打 开 例子 22-2, 沿 着 X,Y 
和 2Z 轴 转 动 或 移动 手机 ,观察 alpha、beta 和 gamma 等 数值 的 变化 。 
22.2.2 deviceorientation 事件 编程 接口 


通过 deviceorientation 事件 获得 alpha 沿 Z 轴 转 动 ,beta 沿 Y 轴 转 动 ,gamma 沿 X 轴 
转动 的 值 ,单位 为 弧度 ,代码 如 下 。 





if (window. DeviceOrientationEvent) { 
window.addEventListener( 'deviceorientation', function(event) 
{vara = event.alpha, b = event. beta, g = event.gamma; 
console. log('Orientation — Alpha: '+ a + ', Beta: '+ b+ ', Gamma: ' + 9g); 











}, false);} 
else 

{console. log( 'This device does not support deviceorientation');} 
22.2.3 设备 移动 


播 一 播 功能 ,如 微 信 的 摇 一 摇 找 附近 好 友 ,京东 、 淘 宝 的 摇 一 摇 抽 奖 , 就 是 由 手机 加 速 传 
感 器 提供 的 API, 在 很 多 原生 App 中 可 以 实现 的 功能 ,现在 在 Web 移动 应 用 中 也 可 以 实现 
了 。 通 过 监听 到 手机 晃动 加 速 变 化 触发 事件 获取 的 数据 来 做 出 相应 行为 。 

设备 移动 用 两 种 状态 : 加 速度 和 旋转 速率 来 描述 移动 与 旋转 。 移 动 加 速度 以 “m/s " 单 
位 表示 ,设备 的 旋转 速率 使 用 单位 /sec”。 


22.2.4 devicemotion 事件 编程 接口 


当 设 备 旋转 移动 时 ,devicemotion 事件 会 被 触发 。 事件 返 回 4 个 属性 值 , 分 别 如 下 。 
(1) acceleration: 在 (X,Y,Z) 轴 上 的 加 速度 。 
(2) accelerationIncludingGravity: 在 (X,Y,Z) 轴 上 的 加 速度 ,考虑 地 球 引力 的 加 速度 。 
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(3) rotationRate: (alpha,， beta, gamma) 的 旋转 角度 的 旋转 速率 。 
(4) Interval: 取样 数据 间隔 。 单 位 是 ms。 
事件 触发 代码 如 下 。 








if ((window. DeviceMotionEvent) { 

window.addEventListener( 'devicemotion', getMotionData, false); 
} else{ 

Console. log( ‘Not supported! ’ ); 
1 





移动 旋转 数据 处 理 代码 如 下 。 





function getMotionData(event) { 
Var acceleration = event.acceleration; 
var x = acceleration. x; 
vary = acceleration. y; 
var z = acceleration.2z; 
acceleration = event.accelerationIncludingGravity; 
var xg = acceleration. x; 
var yg = acceleration. y; 
var zg = acceleration. 2z; 
var rotation = event. rotationRate; 
var a= rotation.alpha; 
var b = rotation. beta; 
var g = rotation. gamma; 
intl = event. interval; 


: 











完整 代码 见 例子 22-3。 


| 
例子 22-3: 
22.2.5 指南 针 Compassneedscalibration part3/eh22/ 


事 件 devicemotion. html 


Compassneedscalibration 事件 会 在 浏览 器 检测 到 指南 针 
需要 校准 时 被 触发 。 其 规范 还 规定 “用 户 代理 应 当 只 在 校准 指南 针 能 够 增加 
deviceorientation 事件 数据 准确 性 的 前 提 下 被 触发 "。 该 事件 主要 用 于 通知 用 户 指 南 针 需要 
校准 时 发 生 。 








22.3 屏幕 方向 API 


当 设备 移动 时 ,设备 的 屏幕 内 容 会 随 着 设备 的 方向 调整 ,设备 的 方向 是 以 旋转 角度 
(Calpha,beta,gamma) 来 度量 的 ,但 是 ,屏幕 内 容 不 会 以 角度 方式 倾斜 变化 ,而 是 以 屏幕 方向 
来 变化 。 屏 幕 方向 只 有 横 屏 (Landscape, 相 当 于 屏幕 宽度 二 高 度 ) 和 竖 屏 (Portrait ,相当 于 
屏幕 高 度 二 宽度 ) 两 种 模式 来 衡量 。 人 类 的 阅读 习惯 是 从 上 到 下 ,从 左 到 右 , 当 设备 屏幕 从 
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坚 屏 顺 时 针 旋 转 90" 变 成 横 屏 时 ,屏幕 内 容 也 要 跟着 切换 成 横 屏 方式 ,否则 会 影响 阅读 。 响 
应 式 Web 设计 也 会 根据 媒体 查询 屏幕 方向 portrait 或 landscape 来 调整 布局 。 但 是 有 一 些 
应 用 必须 要 锁定 屏幕 方向 ,例如 , Web 游戏 ,切换 屏幕 方向 产生 画面 重 写 , 对 于 实时 性 要 求 
很 高 的 应 用 来 说 ,严重 影响 用 户 体验 。 

屏幕 方向 Screen Orientation API, 就 是 让 开发 者 可 以 检测 和 控制 屏幕 方向 的 状态 ,并 
锁定 在 某 一 方向 上 。 屏 幕 的 横竖 模式 又 分 为 主 Cprimary) 和 次 (second) 模 式 , 共 有 4 种 状态 
模式 ,如 下 。 

(1) portrait-primary: 屏幕 保持 在 一 个 正常 的 竖 屏 状态 ,设备 项 部 朝 上 ,底部 朝 下 。 

(2) portrait-secondary: 屏幕 从 正常 竖 屏 状态 旋转 180" ,设备 顶部 朝 下 ,底部 朝 上 ,也 就 
是 倒 过 来 。 

(3) landscape-primary: 屏幕 处 于 一 个 正常 的 横 屏 状态 ,相当 于 屏幕 从 一 个 正常 的 竖 屏 
状态 顺 时 针 旋 转 90”。 

(4) landscape-secondary: 屏幕 处 于 一 个 相反 的 横 屏 状态 ,相当 于 屏幕 从 一 个 正常 的 竖 
屏 状 态 逆 时 针 旋 转 90"。 或 者 ,是 从 正常 的 横 屏 状态 旋转 180 。 


22.3.1 全 屏 模 式 


屏幕 方向 Screen Orientation API 需要 在 全 屏 模式 下 才能 工作 ,所 以 ,这 里 先 让 屏幕 的 
内 容 页 面 进入 全 屏 模式 。 通 过 一 个 页 面 元 素 对 象 调用 requestFullscreen() 方 法 来 进入 全 屏 
模式 。 全 屏 模式 还 有 浏览 器 兼容 问题 ,需要 加 浏览 器 前 缀 。 退 出 全 屏 模式 可 调用 
document. exitFullscreen() 来 完成 。 代 码 如 下 。 








function Fullscreen(element) { 

if(element. requestFullscreen) { 
element. requestFullscreen( ); 

} else if(element.mozRequestFullScreen) { 
element. mozRequestFullScreen( ); 

} else if(element. webkitRequestFullscreen) { 
element. webkitRequestFullscreen( ); 

} else if(element.msRequestFullscreen) { 
element. msRequestFullscreen( ); 

} 

} 











22.3.2 读 取 屏幕 模式 
screen. orientation 有 两 个 读 取 屏 幕 方向 的 属性 : type( 方 向 ) 和 angle( 角 度 ) ,返回 值 如 下 。 


(1) type: 可 以 是 portrait-primary、 portrait-secondary、landscape-primary、 landscape- 
secondary 4 种 状态 值 。 

(2) angle: 0" 表 示 设 备 厂家 默认 屏幕 方向 ,相当 于 portrait_primary, 90" 相当 于 
landscape_parimary,180" 相 当 于 portrait_second,270" 相 当 于 landscape_second。 

在 全 屏 模式 下 ,通过 change 事件 读 取 这 两 个 属性 ,代码 如 下 。 
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screen. orientation. addEventListener ("change", function(evt) {alert (screen. orientation. 
type + " ”+ screen.orientation.angle);}, false) 











22.3.3 锁 屏 接口 


通过 lock() 来 锁定 一 个 或 一 对 屏幕 方向 模式 ,执行 lock 前 需要 调用 requestFullscreen()， 
切换 到 全 屏 模式 ,并 需要 用 户 许 可 ,才能 锁定 屏幕 方向 ,锁定 成 功 返 回 “true”, 和 否则 返回 
“false”。 用 unlock() 来 解除 锁定 ,解除 全 屏 模式 也 会 自动 解除 屏幕 锁定 。lock 参数 除了 可 
以 是 上 面 4 种 状态 模式 外 ,还 可 以 有 以 下 几 种 锁定 模式 。 

(1) Landscape: 表示 可 以 是 landscape-primary 或 landscape-secondary 模式 。 

(2) Portrait: 表示 可 以 是 portrait-primary 或 portrait-secondary 模式 。 

(3) Any: 表示 可 以 是 portrasit 或 landscape 模式 。 

(4) Natural: 设备 厂家 默认 的 当前 屏幕 方向 。 

代码 如 下 。 





screen. orientation. lock("portrait ~ primary" ); 
screen. orientation. unlock( ); 











22.3.4 浏览 器 支持 


Screen Orientation API 只 有 移动 浏览 器 支持 ,可 以 通过 下 面 的 代码 检查 浏览 器 支持 
情况 。 








if ("orientation" in screen) {var support = true;} 








最 新 Chrome 和 Opera 浏览 器 不 需要 加 浏览 器 前 级 ,但 是 ,IE 和 Firefox 浏览 器 需要 加 
前 级 ,而 且 还 使 用 旧 的 方法 名 lockOrientation() 和 unlockOrientation() , 读 取 屏幕 方向 属性 
事件 是 orientationchange, 代 码 如 下 。 





screen. lockOrientationUniversal = screen. lockOrientation || screen. mozLockOrientation || 
screen. msLockOrientation; 
if (screen. lockOrientationUniversal("landscape — primary")) { 

console. log( 'orientation was locked') ;} else {console. log( 'orientation lock failed');} 











练习 


1. 在 例子 22-1 代码 中 ,修改 videoObj 二 { audio: true, video: { facingMode: "user" ) } ,加 
入 前 置 或 者 二 { audio: true, video: { facingMode: "environment"”} } 后 置 摄像 头 的 设置 ， 
在 页 面 代 码 中 添加 相应 的 前 置 后 置 摄像 头 选项 。 

2. 在 线 搜索 “html5 摇 一 播 抽奖 代码 ”, 下 载运 行 ,分 析 其 原理 。 


移动 混合 (Hybrid) 应 用 开发 


23.1 Web Native 和 Hybrid App 的 比较 


Web App 无 须 安 装 ,但 需要 打开 系统 上 的 浏览 器 来 运行 ,因为 打开 的 感觉 是 网 页 ,应 用 
体验 不 太 好 ,操作 没有 原生 应 用 灵活 ,局 限 性 大 。 

Native App 是 直接 安装 在 系统 上 的 应 用 ,有 较 好 的 应 用 体验 ,但 是 开发 难度 大 ,并 且 需 
要 针对 不 同系 统 开 发 对 应 的 版 本 ,开发 和 维护 成 本 太 高 。 

Hybrid App 综合 了 上 述 两 种 App 的 优点 ,模仿 面向 Native App 的 开发 模式 ,用 户 UI 
界面 通过 Web 规范 编写 实现 ,使 用 JavaScript 调用 第 三 方 封装 好 的 系统 API, 并 充分 利用 
Web 开发 跨 平台 优势 ,不 再 需要 任何 原生 语言 参与 开发 ,最 后 再 打包 编译 成 不 同 操作 系统 
平台 的 原生 应 用 。 

Hybrid App 实质 上 是 Web APP 全 屏 运行 于 一 个 封装 了 浏览 器 (WebView) 基 本 内 核 
的 apk/ipa 原生 程序 。Hybrid App 开发 的 优点 是 跨 平 台 , Hybrid App 基本 保证 了 App 的 
功能 、 性 能 和 体验 。 

Hybrid App 开发 有 以 下 两 种 模式 。 

(1) 一 种 是 基于 HTML 十 CSS 进行 界面 布局 ,通过 加 强 的 Web 前 端 框架 浑 染 优化 页 
面 ,同时 采用 标准 JavaScript 进行 原生 扩展 来 实现 跨 平 台 App 开发 ,例如 , PhoneGap 
(Apache Cordova) ,Titanium 移动 开发 平台 ,Ionic 跨 平台 开发 。 

(2) 另 一 种 是 放弃 HTML 十 CSS 的 UI 界面 布局 方式 ,依靠 第 三 方 的 中 间 语 言 ( 如 JS) 
来 实现 Android 和 iOS 的 系统 级 接口 编程 调用 ,从 而 实现 跨 平台 。 这 种 方式 的 应 用 需要 开 
发 不 同 操作 系统 的 UI 组 件 , 再 配合 中 间 语 言 来 完成 开发 ,最 大 的 优势 是 提高 了 性 能 ,但 这 
样 也 失去 了 HTML 十 CSS 布局 的 标准 性 和 灵活 便捷 。 这 种 方式 开发 的 框架 有 Native 
React 。 


下 面 来 通过 PhoneGap 框架 看 Hybrid 的 开发 模式 。 
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23.2 了 PhoneGap(Apache Cordova) 


PhoneGap 可 以 同时 支持 几乎 所 有 流行 的 移动 平台 的 开发 框架 。PhoneGap 被 Adobe 
公司 收购 后 , 它 的 核心 技术 仍然 是 开源 的 ,改名 为 Cordova, 交 由 Apache 基金 托管 。 
PhoneGap 最 重要 的 部 分 是 为 应 用 封装 了 系统 级 的 JavaScript API, 应 用 开发 者 可 以 直接 访 
问 移动 设备 的 硬件 和 系统 接口 ,例如 ,相机 .GPS、 联 系 人 等 ,最 后 打包 编译 成 不 同 的 应 用 平 
台 ,通过 一 个 WebView 来 加 载 实际 应 用 。 

自从 PhoneGap 于 2010 年 被 Adobe 公司 收购 分 成 两 块 后 , PhoneGap 还 是 基于 
Cordova 内 核 建立 的 开发 接口 ,基于 Apache Cordova 项 目 和 PhoneGap 项 目 是 可 以 互通 的 ， 
只 不 过 是 Adobe 公司 打造 了 一 个 在 线 打包 编译 平台 (https://build. phonegap. com/) ,如 
图 23-1 所 示 ,把 PhoneGap Build 打包 工具 这 一 部 分 变 成 了 商业 版 ,虽然 仍 给 开发 者 提供 一 
个 私有 项 目 免 费 的 打包 编译 和 无 限制 的 开源 项 目 免 费 打 包 编译 ,但 必须 是 来 自 公 共 GitHub 
的 开源 项 目 。 其 他 更 多 的 项 目 转换 原生 应 用 需要 升级 到 付费 版 。PhoneGap Build 的 优势 
是 无 须 考虑 原生 SDK 的 安装 维护 ,一 键 即 可 把 应 用 代码 上 载 到 云端 打包 编译 完 





图 23-1 PhoneGap 在 线 打包 工具 
(图 片 来 源 : https://build. phonegap. com/) 


23.3 ” PhoneGap 开发 环境 


早期 PhoneGap 开发 环境 搭建 非常 复杂 ,不 仅 需要 手动 下 载 安装 包 , 对 于 Android 的 混 
合 应 用 ,还 要 安装 Android 开发 工具 包 及 Eclipse 集成 开发 环境 。 最 新 版 PhoneGap 提供 丰 
富 的 开发 工具 ,可 以 摆脱 Android 开发 工具 包 依 赖 。 这 些 新 的 开发 工具 包括 移动 端的 
PhoneGap Developer App, 桌 面 端的 PhoneGap Desktop App, 云 端的 PhoneGap Build and 
PhoneGap Enterprise。 而 所 有 桌面 开发 命令 行 环境 搭建 是 通过 Node. js 的 运行 环境 下 包 管 
理工 具 NPM 安装 完成 。 

在 桌面 端的 开发 工具 有 以 下 两 种 方式 。 

(1) 一 个 图 形 界面 的 桌面 端 开发 工具 Desktop App, 可 以 用 来 创建 一 个 新 App 项 目 ,或 
添加 一 个 已 有 的 App 项 目 ,同时 , 它 也 等 同 于 一 个 Web 服务 器 。 

(2) 一 个 命令 行 的 开发 工具 PhoneGap CLI, 可 以 创建 、 添 加 一 个 项 目 ,并 启动 Web 服 
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务 器 。 

为 了 配合 桌面 的 开发 工具 ,PhoneGap 还 提供 了 一 个 移动 端的 Mobile App 开发 工具 ， 
可 以 在 Apple Store、Google Store 和 Window Phone Store 下 载 PhoneGap Developer App。 
通过 http://172. 24. 16. 126 :3000 连接 到 桌面 端的 App 项 目 , 它 等 于 一 个 Sandbox( 沙 箱 ) 
环境 ,并 装 了 一 些 插件 ,所 以 不 需要 编译 和 代码 签名 就 可 以 运行 于 移动 设备 上 ,主要 用 来 测 
试 App 项 目 和 查看 App 的 局 面 效果 。 

PhoneGap 提供 以 下 两 种 方式 打包 编译 应 用 。 

(1) PhoneGap CLI: 命令 行 的 打包 编译 工具 。 操 作 较 复杂 ,免费 。 

(2) PhoneGap Building: 在 线 云 打包 编译 ,操作 快捷 简单 ,但 是 只 提供 一 个 免费 项 目 ， 
更 多 的 项 目 需要 付费 。 

对 于 不 同 的 移动 操作 系统 ,还 要 安装 相应 的 操作 系统 开发 包 SDK 来 完成 本 地 编译 工 
作 。 例 如 ,Android 的 SDK 开发 包 , 来 编译 Android App,iOS App 还 要 在 苹果 台式 计算 机 
操作 系统 下 安装 iOS SDK 开发 包 。 

PhoneGap 3. 0 版 以 后 ,PhoneGap 都 是 在 Node. js 环境 下 安装 运行 。Node. js 是 一 个 
基于 Chrome V8 引擎 的 JavaScript 运行 环境 。Node. js 使 用 了 一 个 事件 驱动 . 非 阻 塞 式 
1/O 的 模型 ,使 其 既 轻 量 又 高 效 。Node. js 的 包 管 理 器 npm, 是 全 球 最 大 的 开源 库 生 态 系 
统 。Node.js 的 另 一 个 功能 是 让 JavaScript 代码 原本 在 客户 端 浏览 器 上 运行 的 方式 变 成 可 
以 在 服务 器 端 运行 ,安装 好 的 Node. js 提供 一 个 命令 行 的 运行 窗口 ,通过 npm 命令 来 安装 
最 新 版 PhoneGap 和 Cordova。 命 令 如 下 。 




















npm install — g phonegap 








npm install — g cordova 











参数 -g 表示 全 局 安装 ,这 样 可 以 在 任何 目录 下 执行 PhoneGap 命令 。 

Cordova 和 PhoneGap 的 区 别 在 于 开发 工具 ,PhoneGap 开发 依赖 于 Cordova 的 API， 
Cordova 只 提供 核心 接口 API 及 命令 行 的 编译 ,PhoneGap 除了 提供 自己 的 命令 ,其 命令 的 
语法 基本 与 Cordova 命令 相同 ,也 可 以 直接 调用 Cordova 的 命令 。 更 多 的 命令 见 表 23-1。 

表 23-1 Cordova 和 PhoneGap 的 基本 命令 
命令 描述 命令 例子 说 明 


cordova create test com. cordova. test 


创建 项 目 创建 项 目 工程 < 文件 夹 名 > < 包 名 > < app 名 > 


test 
必须 进入 项 目 文件 夹 下 执行 命令 ,添加 Android 
cordova platforms add android --save | 平台 支持 ,--save 表示 保存 安装 的 Android 版 本 











添加 平台 支持 








--fetch 到 config. xml,--fetch 表示 用 npm 安装 并 保存 到 
node_modules 目录 ,这 两 个 选项 可 以 忽略 
删除 平台 cordova platform rm android 删除 Android 平台 支持 
显示 平台 cordova platforms ls 显示 已 添加 的 平台 





检查 平台 要 求 | cordova requirements android 检查 Android 的 平台 是 否 符合 打包 、 编 译 要 求 
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续 表 
命令 描述 命令 例子 说 明 
cordova prepare android 
编译 应 用 cordova compile android 这 里 分 成 两 步 , 打包 ,编译 
打包 编译 cordova build android 将 打包 、 编 译 合 一 





必须 先 安装 Android SDK ,并 通过 AVD Manager 
创建 一 个 具体 Android 版 本 的 模拟 器 

开发 台式 计算 机 上 必须 通过 USB 连接 一 个 
Android 设备 


在 模拟 器 运行 | cordova emulate android 





在 手机 上 运行 | cordova run android 





cordova plugin add 


添加 照相 设备 API 插 件 ,可 以 从 本 地 或 远程 添加 
插件 ,- -save 表示 保存 指定 的 插件 到 config. 
xml,--fetch 表示 用 npm 抓 取 插件 并 保存 到 node_ 
modules 目录 ,这 两 个 选项 可 以 忽略 


cordova-plugin-camera -save --fetch 
添加 插件 cordova plugin add 
https://github. com/apache/cordova- 








plugin-camera. git 

PhoneGap 命令 和 Cordova 基本 一 样 ,只 是 将 上 面 的 cordova 命令 改 成 phonegap ,效果 
一 样 。 但 是 ,PhoneGap 还 提供 了 云 平 台 , 所 以 还 有 云 应 用 的 打包 编译 命令 扩展 , 见 表 23-2。 
表 23-2 ”PhoneGap 的 远程 命令 




















命令 描述 命令 例子 说 明 
登录 云端 phonegap remote login 登录 到 Adobe PhoneGap 云端 平台 
退出 云端 phonegap remote logout 退出 云端 平台 
云端 打包 编译 phonegap remote build android | 在 云端 打包 编译 Android 应 用 
云端 运行 phonegap remote run android 在 云端 打包 编译 Android 应 用 ,并 安装 运行 


23.4 PhoneGap 的 基本 架构 


PhoneGap/Cordova 的 开发 架构 主要 由 三 部 分 组 成 : 基于 HTML 十 CSS 十 JavaScript 
的 Web 应 用 代码 ,能 入 的 HTML 泻 染 引 擎 (WebView) ,及 Cordova plugins 插件 ,用 来 提 
供与 Android 操作 系统 服务 及 硬件 的 接口 ,Cordova 的 应 用 是 运行 在 WebView 里 面 , 如 
图 23-2 所 示 。 

PhoneGap/Cordova 是 Android 平 台 应 用 上 基于 事件 驱动 的 开发 模式 ,一 个 Hybrid 
App 应 用 的 生命 周期 和 原生 App 生命 周期 基本 类 似 。Cordova 应 用 有 三 种 状态 : 创建 、 和 暂 
停 和 恢复 ,对 应 Cordova 的 三 个 事件 ,与 Android 原生 应 用 事件 与 应 用 的 生命 周期 对 比 见 
表 23-3。 

表 23-3 Cordova 应 用 与 Android 原生 应 用 设计 与 生命 周期 状态 表 














Cordova 事件 相当 于 Android 事件 说 明 
deviceready onCreate() 应 用 启动 
pause onPause() 应 用 进入 后 台 运 行 
resume onResume() 应 用 恢复 前 台 运行 
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Cordova Application 
Web App Cordova Plugins 


HTML config.xml Accelerometer ”Ceolocation 


JS CSS Resources Camera Media 


Device Network 


Contacts Storage 


HTML Rendering 
Engine(WebView) 


Custom Plugiias 





图 23-2 ”Cordova 的 架构 体系 
(图 片 来 源 : http://cordova. apache. org/docs/en/latest/guide/overview/) 


当 一 个 PhoneGap 应 用 启动 时 ,会 触发 deviceready 事件 , 当 按 下 移动 设备 Home 键 或 
返回 键 , phoneGap 应 用 被 切换 到 后 台 , 触发 pause 事件 ,重新 打开 一 个 后 台 和 运行 的 
PhoneGap 应 用 会 激活 resume 事件 。 


23.5 PhoneGap 的 API 


Cordova 提供 了 各 个 移动 操作 系统 平台 的 核心 插件 ,PhoneGap 开发 是 基于 Cordova 的 
插件 来 调用 针对 不 同 操作 系统 平台 的 系统 服务 和 硬件 接口 ,Cordova 提供 下 面 支持 系统 平 
台 的 插件 : Android、 iOS、Windows、Blackberry、Ubuntu、 Firefox OS、 Mac OS、 WP8、 
Browser。 用 户 也 可 以 自己 开发 插件 来 满足 特定 的 开发 需求 。 下 面 是 Cordova 提供 的 系统 
核心 插件 。 

(1) Battery Status, 电 池 状 态 检查 ,由 window 对 象 的 三 个 事件 触发 : batterystatus、 
batterycritical ,batterylow。 代 码 例 子 如 下 。 





window.addEventListener("batterylow", onBatteryLow, false); 
function onBatteryLow(status) { alert(" 电 池 电 量 低 ”+ status. level + "%");} 











(2) Camera, 摄 像 头 API, 定 义 的 对 象 接 口 是 navigator. camera, 可 以 从 摄像 头 或 系统 
的 相册 库 获 取 图 像 。 如 下 是 获取 照片 的 函数 调用 , 若 获 取 照 片 成 功 会 调用 函数 
cameraSuccess 来 处 理 照片 , 若 调 用 错误 会 调用 函数 cameraError 来 处 理 错 误 。 代 码 如 下 。 





navigator. camera. getPicture(cameraSuccess, cameraError, cameraOptions); 
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(3) Console, 后台 终 端 输出 信息 API, 定 义 的 接口 全 局 对 象 是 console, 必须 在 
document 对 象 的 deviceready 事件 发 生 后 才 起 作用 。 代 码 如 下 。 





document. addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
console. log("App 启动 ");} 











(4) Contacts, 系统 联系 人 ,定义 的 接口 对 象 是 navigator. contacts, 提 供 这 个 对 象 可 以 
查询 系统 联系 人 的 数据 库 。 如 下 代码 是 创建 一 个 联系 人 对 象 。 








var myContact = navigator.contacts. create({"displayName":"user1"}); 








(5) Device, 获 取 设 备 信息 ,定义 的 全 局 对 象 接口 是 device,document 的 deviceready 事 
件 发 生 后 ,device 对 象 才 有 效 。 如 下 代码 是 获取 设备 的 型 号 或 产品 名 称 。 





document. addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
console. log(device. model);} 





(6) Device Motion ,加 速度 计 接 口 ,通过 navigator. accelerometer 接口 对 象 获取 X,Y,Z 
轴 的 数据 ,基本 代码 如 下 。 





navigator. accelerometer. getCurrentAcceleration(onSuccess, onError); 
function onSuccess(acceleration) { 
console. log( 'axeX: ' + acceleration.x + '\n'+ 
'axe Y: ' + acceleration.y + '\n' + 
'axe 2: ' + acceleration.z + '\n'+ 
Timestamp: ' + acceleration.timestamp + '\n'); 
. 
function onError() { 
alert( 'Error! ');} 











(7) Device Orientation, 指 南 针 罗 盘 接 口 navigator. compass, 通 过 回调 函数 onSuccess 
获取 罗盘 航向 对 象 CompassHeading 实例 heading, 代 码 如 下 。 





navigator. compass. getCurrentHeading(onSuccess, onError); 
function onSuccess(heading) { 
alert( 'Heading: ' + heading. magneticHeading); 
}; 
function onError(error) { 
alert( 'CompassError: ' + error.code); 
}; 











(8) Dialogs, 通 过 全 局 对 象 接口 navigator. notification 获取 本 地 的 推送 通知 ,提供 4 种 


推送 通知 : navigator. notification. alert() ;navigator. notification. confirm ( ) ;， navigator. 
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notification. prompt(); navigator. notification. beep() 。 

(9) File, 访 问 设备 文件 的 File API, 接 口 对 象 是 全 局 cordova. file。 可 以 访问 系统 文件 
目录 , 读 写 文件 ,创建 文件 .目录 。 

(10) File Transfer, 上 传 下 载 文件 接口 ,通过 FileTransfer 和 FileUploadOptions 构造 
函数 创建 实例 对 象 来 操作 文件 的 上 传 下 载 。 

(11) Geolocation ,地 理 位 置信 息 接 口 ,通过 全 局 对 象 navigator. geolocation 获取 经 纬 
度 ,代码 如 下 。 





navigator. geolocation. getCurrentPosition(onSuccess, onError); 
var onSuccess = function(position) { 
alert('Latitude: ' + position.coords.latitude + '\n'+ 
'Longitude: ' + position. coords. longitude + '\n'+ 
'Altitude: ' + position. coords.altitude + '\n'+ 
'Accuracy: ' + position.coords.accuracy+ '\n'+ 
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n'+ 
'Heading: '+ position.coords.heading + \n'+ 
'Speed: '+ position.coords. speed+ '\n' + 
'Timestamp: '+ position.timestamp + '\n'); 
}; 
function onError(error) { 
alert('code: ' + error.code + '\n'+ 
'message: ' + error.message + '\n'); 











(12) Globalization, 语 言 .时 间 和 本 地 化 设置 ,接口 对 象 是 navigator. globalization ,下面 
的 代码 是 获取 当前 语言 设置 。 





document. addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
navigator. globalization. getPreferredLanguage( 
function (language) {alert(' 当 前 语言 : ' + language.value + "\n');}, 
function () {alert(' 获 取 语言 出 错 ! \n');} 
);} 











(13) Inappbrowser, 在 应 用 内 部 打开 浏览 器 窗口 ,相当 于 替代 window. open() 打 开 浏 
览 器 窗口 的 方式 。 接 口 对 象 是 cordova. InAppBrowser, 下 面 的 代码 是 在 WebView 内 打开 
URL 地 址 链接 ,显示 地 址 栏 。 





var ref = cordova. InAppBrowser.open( 'http://apache.org'，'_self'，'location = yes'); 











(14) Media, 录 音 和 播放 设备 的 音频 文件 ,该 功能 接口 没有 与 W3C 的 媒体 标准 执行 ,我 
们 知道 ,HTML 5 已 经 提供 了 非常 强大 的 媒体 接口 ,未 来 .Cordova 会 取消 这 个 接口 。 

(15) Media Capture, 抓 取 设 备 的 图 片 、. 视 频 和 音频 ,涉及 设备 的 摄像 头 和 麦克 风 硬 件 
访问 ,所 以 ,App 应 用 必须 按 隐 私 安全 条 款 要 求 , 让 用 户 决 定 摄像 头 和 麦克 风 的 访问 。 接 口 
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对 象 是 navigator. device. capture, 下 面 的 代码 用 于 抓 取 一 个 图 像 。 





navigator. device. capture. captureImage( onSuccess, onError, {limit:1}); 
Var onSuccess = function(imageFiles) { 
// do something interesting with the file}; 
var onError = function(error) { 
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error'); 
}; 











(16) Network Information ,检查 网 络 连接 信息 ,接口 对 象 是 navigator. connection, 通 
过 获取 navigator. connection. type 属性 ,得 到 网 络 连接 状态 ,这 些 状 态 以 常量 表示 ,有 
UNKNOWN,ETHERNET,WIFI.CELL_2G,CELL_3G,CELL_4G,CELL,NONE。 

(17) Splashscreen ,显示 一 个 应 用 的 启动 图 像 , 又 分 为 单 启 动 图 像 和 多 启动 图 像 ,无 须 
写 代 码 , 仅 在 config. xml 中 添加 < splash > 标签 如 下 ,src 表示 启动 要 加 载 的 图 像 源 。 代 码 
如 下 。 





< splash src = "res/screen/ios/Default@2x~universal~anyany. png" /> 











(18) Vibration, 设 备 发 出 振动 ,与 W3C 组 织 在 2016 年 提出 的 规范 一 致 ,接口 对 象 是 
navigator. vibrate, 下 面 的 代码 是 让 设备 发 出 1s 振动 。 





navigator. vibrate(1000); 











(19) StatusBar, 状态 条 ,通过 StatusBar 全 局 对 象 和 config. xml 设置 来 重新 定义 
Android 和 iOS 的 状态 条 ,下 面 的 代码 是 让 状态 条 的 文字 显示 为 白色 ,背景 为 黑色 。 





StatusBar. styleLightContent() 7 








(20) Whitelist ,定义 在 WebView 中 浏览 的 URL 地 址 白 名 单 策略 ,默认 的 URLs 是 
ile:// URLs 本 地 文件 地 址 ,其 他 许可 策略 要 在 config. xml 中 添加 < allow-navigation > 标 
签 定义 。 下 面 的 代码 定义 是 允许 访问 域名 http://example. com/ 下 面 的 资源 。 





<allow— navigation href = "http://example. com/ * " /> 











23.6 PhoneGap App 开发 调试 


下 面 通过 例子 23-1 来 了 解 整个 App 的 开发 过 程 。 首 先 ,通过 Cordova 或 PhoneGap 创 
建 一 个 项 目 后 ,会 生成 一 个 项 目的 目录 文件 ,在 WWW 目录 
下 有 一 个 index. html 文件 ,我 们 的 开发 代码 就 从 这 里 开始 。 例子 23-1: 
注意 ,这 个 index. html 文件 名 不 能 修改 , 它 相 当 于 Java 的 。 Part3/ch23/myapp 
main() 方 法 ,是 Web 应 用 的 首页 文件 。 另 外 ,在 项 目 文件 夹 
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下 还 生成 了 一 个 重要 的 设置 文件 config. xml。Platforms 目录 是 存放 开发 不 同 操作 系统 平 
台 的 目录 。 

由 于 PhoneGap 是 事件 驱动 的 编程 模式 ,大 多 数 Cordova 插件 都 是 在 deviceready 事件 
发 生 后 才 可 以 调用 ,况且 ,要 模拟 原生 的 应 用 生命 周期 ,PhoneGap 必须 加 入 deviceready 事 
件 监听 。 这 里 通过 添加 代码 和 camera 插件 来 完成 一 个 拍照 功能 的 应 用 。 

首先 ,通过 Cordova create myapp 创建 一 个 项 目 , 修 改 www\index. html, 添 加 照相 按 
钮 < button > 和 显示 照片 的 区 块 <img >。 代 码 如 下 。 





<div class = "app"> 
<div> 
< ijmg id = "get 一 picture - result" /> 
</div> 
<Button id = "take — picture— button"> Take Picture </button > 
</div> 











修改 js\index.js, 定 义 应 用 的 一 些 状态 数据 ,在 应 用 处 于 后 台 运 行 时 ,要 保存 这 些 状态 
数据 ,在 应 用 处 于 前 台 运 行 时 ,恢复 这 些 数据 。 注意, PhoneGap/Cordova 采用 JSON 
(JavaScript Object Notation ,JavaScript 对 象 表示 法 ) 的 编程 风格 。 代 码 如 下 。 





var appState = { 
takingPicture: true, 
imageUri: "" 
}; 
var APP_STORAGE KEY = "exampleAppState"; 





应 用 App 对 象 封装 有 bindEvents 函数 对 象 ,在 App 启动 时 必须 初始 化 deviceready、 
pause、resume 事件 监听 ,并 定义 回调 函数 控制 App 的 生命 周期 状态 。 代 码 如 下 。 





bindEvents: function() { 
document. addEventListener( 'deviceready', this. onDeviceReady, false); 
document. addEventListener( 'pause', this. onPause, false); 
document. addEventListener( 'resume', this.onResume, false); 


}, 





当 应 用 启动 后 (deviceready 事件 触发 后 ) ,监听 照相 按钮 的 click 事件 ,如 果 按 钮 单 击 事 
件 发 生 , 则 调用 getPicture() 从 摄像 头 抓 取 图 像 。 代 码 如 下 。 











document. getElementById( "take— picture— button" ). addEventListener("click"，function() { 
appState.takingPicture = true; 
navigator. camera. getPicture(cameraSuccessCallback, cameraFailureCallback, { 
sourceType: Camera. PictureSourceTYpe. CAMERA, 
destinationType: Camera. DestinationType. FILE URI, 
targetWidth: 250, 
targetHeight: 250} ); 
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当 应 用 被 切换 到 后 台 事件 (pause) 发 生 时 ,调用 回调 onPause, 将 应 用 的 状态 数据 保存 。 
代码 如 下 。 








onPause: function() { 
if(appState. takingPicture || appState. imageUri) { 
window. localStorage. setItem(APP_STORAGE KEY, JSON. stringify(appState)); 
1 











当 应 用 从 后 台 恢 复 到 前 台 事件 (resume) 发 生 时 ,把 存储 的 应 用 状态 数据 读 回来 ,并 检 
查 如 果 照 相 已 经 完成 (appState. takingPicture 一 false) ,就 将 已 经 抓 取 到 的 图 像 显 示 出 来 。 如 
果 处 于 照相 状态 (appState. takingPicture 一 true) ,并 检查 camera 插件 接口 是 否 成 功 调用 ,如 果 
是 ,就 把 结果 传 回 cameraSuccessCallback() ,否则 ,结果 传 回 cameraFailureCallback()。 代 
码 如 下 。 








onResume: function(event) { 
var storedState = window. localStorage. getItem(APP STORAGE KEY); 
if(storedState) { 
appState = JSON.parsel(storedState); 
} 
if(!appState. takingPicture && appState. imageUri) { 
document. getElementById("get ~ picture— result"). src = appState. imageUri; 
} 
else if(appState. takingPicture && event. pendingResult) { 


if(event. pendingResult. pluginStatus === "OK") { 
cameraSuccessCallback( event. pendingResult. result); 
} else{ 


cameraFailureCallback(event. pendingResult. result); 
上 











最 后 ,成 功 完成 一 个 拍照 过 程 ,会 调用 回调 函数 cameraSuccessCallback(), 把 抓 取 的 图 
像 放 到 显示 区 显示 出 来 ,并 修改 应 用 的 状态 数据 。 代 码 如 下 。 





function cameraSuccessCallback( imageUri) { 
appState. takingPicture = false; 
appState. imageUri = imageUri; 
document. getElementById("get ~- picture— result"). src = imageUri; 











23.7 Ionic(Html 十 Angular. js 十 Cordova) 介 绍 


Ionic 是 基于 HTML、CSS 及 JavaScript 开发 的 移动 设备 Web App 开发 框架 ,采用 
Sass( 一 种 类 似 于 计算 机 代码 风格 的 CSS 样式 ,通过 引入 变量 、 函 数 、 运 算 符 等 来 定义 CSS， 
用 这 种 方式 写 的 CSS 文件 扩展 名 为 “. scss”, 通 过 编译 器 ,可 以 转换 成 传统 的 CSS 格式 ) 十 
AngularJS 及 Cordova 的 开发 模式 。 通 过 它 可 以 构建 接近 原生 体验 的 移动 应 用 程序 。Ionic 
主要 注重 应 用 程序 的 UI 交 互 外 观 和 体验 ,是 基于 Hybird 模式 的 HTML 5 移动 应 用 程序 
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开发 。 

使 用 HTML 十 Sass 十 AngularJS 基于 网 页 开发 模式 ,达到 跨 平台 效果 ,系统 级 服务 和 硬 
件 访问 通过 调用 Cordova 插件 解决 ,通过 添加 JavaScript 代码 完成 移动 应 用 的 开发 。 

AngularJS 是 Google 的 一 个 Web 开发 框架 ,通过 Directive 指令 (使 用 JavaScript 来 实 
现 语义 化 标签 ,相当 于 JSP 的 taglib 标签 库 ) 来 实现 丰富 的 UI 控件 ,通过 常用 Icon 库 (Icon 
Pack) 实 现 完美 的 用 户 界面 。AngularUI Router 模块 实现 页 面 路 由 、 采 用 Hammer. js 做 多 
点 触 控 实 现 左 右 滑 动 菜 单 、 下 拉 更 新 、 自 定义 主题 等 UI 功能 。 

DOM 是 一 种 消耗 性 能 的 交互 技术 ,Ionic 通过 限制 或 完全 移 除 jQuery ,使 用 移动 设备 
的 GPU 硬件 加 速 来 提高 性 能 ,所 以 要 求 更 新 一 代 的 移动 操作 系统 版 本 。Ionic 仅 支 持 iOS 6 
及 和 Android 4. 1 以 上 的 版 本 。 

要 进一步 了 解 Ionic, 可 以 到 官网 http://ionicframework. com/ 及 下 载 源 码 地 址 
https://github. com/driftyco/ionic/ 查 询 。 


23.8 React Native(JS 十 CSS) 介 绍 


React Native 起 源 于 Facebook 的 内 部 项 目 , 仅 用 JavaScript 通过 原生 UI 组件 来 开发 
出 效果 接近 原生 的 Android iOS 的 应 用 。 

开发 框架 的 理念 是 "Learn once，write anywhere”, 可 以 理解 为 ,学 习 一 次 React JS 前 
端 Web 框架 ,实现 任何 终端 的 App 开发 。 但 是 ,虽然 都 是 基于 JavaScript 编写 的 应 用 ,对 于 
Web\iOS 和 Android 平台, 应 用 代码 也 会 有 差别 。 

虽然 React Native 代码 用 纯 JavaScript 编写 ,但 是 用 的 是 JSX 风格 ,这 是 一 种 很 像 
XML 的 JavaScript 语法 扩展 ,再 经 过 预 编 译 处 理 , 转 换 成 支持 ECMAScript 6 规范 的 JS 代 
码 。 其 目的 是 把 代码 的 逻辑 控制 和 视图 模板 放 在 一 个 语法 规范 里 完成 (例如 ,传统 的 
HTML 代码 和 JS 代码 是 不 同 的 语法 规范 ,是 分 离 的 结构 ,而 JSX 语法 风格 是 把 JavaScript 
代码 和 HTML 元 素 标签 合 在 一 个 语法 里 来 写 ) ,由 于 是 基于 JavaScript 语言 开发 的 应 用 ,所 
以 可 以 像 Web 应 用 一 样 在 Chrome 浏览 器 中 调试 运行 。 

React 的 主要 技术 是 Virtual DOM 泻 染 ,相当 于 模拟 浏览 器 的 DOM( 文 档 对 象 模型 ) 技 
术 。Virtual DOM 是 把 移动 操作 系统 原生 的 UI 组件 和 HTML 元 素 结合 在 一 起 ,通过 JSX 
抽象 成 DOM 元 素来 演 染 。 例 如 ,除了 可 以 泻 染 HTML 结构 元 素 外 ,还 可 以 创建 类 似 
HTML 的 标签 元 素 、 元 素 属性 等 来 形容 原生 UI 组 件 ,再 通过 不 同 的 演 染 引擎 生成 不 同 平 
台 (Web\iOS 和 Android) 下 的 UI 布局 ,同时 支持 CSS 子 集 。JS 和 Native 原生 UI 控件 之 
间 通 过 Bridge 模块 的 异步 Async 消息 协议 来 通信 。 

由 于 React Native 采用 原生 UI 控件 ,接近 原生 的 人 机 交互 体验 ,可 提供 更 好 的 移动 设 
备 触 摸 、 手 势 识 别 功能 ,实现 更 丰富 和 高 性 能 的 动画 效果 ,整体 性 能 更 出 色 。 


练习 


Cordova 提供 了 丰富 的 移动 硬件 访问 接口 ,例如 ,摄像 头 ,分 别 运行 例子 22-1 的 HTML 5 
的 Camera API 和 例子 23-1 的 Cordova Camera API, 看 看 有 哪些 不 同 。 


移动 Web 应 用 测试 方法 


24.1 搭建 测试 环境 


Web 应 用 开发 是 基于 B/S 的 开发 构架 ,虽然 大 多 数 编程 是 在 前 端 完成 ,也 就 是 说 编写 
代码 和 部 分 单元 模块 调试 可 以 不 依赖 Web 服务 器 ,但 是 ,在 系统 集成 测试 时 ,必须 有 完整 的 
B/S 环境 ,就 是 要 安装 Web 服务 器 和 各 种 常用 浏览 器 ,如 果 要 做 远程 测试 ,把 手机 或 移动 模 
拟 器 通过 网 络 连 接 到 远程 或 本 地 服务 器 ,必须 要 有 Wi-Fi 路 由 器 等 联网 设备 与 Web 服务 器 
连接 。 


24.1.1 Web 服务 器 


最 流行 的 开源 Web 服务 器 是 Apache Web 服务 器 ,可 以 在 Windows 和 Linux 操作 系 
统 下 运行 。 但 是 ,作为 初学 者 ,推荐 带 有 图 形 界面 工具 的 集成 Web 服务 器 。 例 如 ,在 
Windows 环境 下 的 WAMP(Windows 十 Apache 十 MySQL 十 PHP), 把 移动 Web 应 用 文件 
复制 到 WAMP 安装 目录 下 的 WWW 目录 下 ,通过 浏览 器 或 在 线 移动 模拟 设备 访问 WAMP 
服务 器 ,访问 服务 器 的 地 址 是 http://localhost/。 


24.1.2 浏览 器 


在 B/S 构架 下 开发 的 Web 应 用 ,当然 离 不 开 浏 览 器 。 我 们 在 台式 计算 机 上 开发 的 移 
动 应 用 基本 上 是 在 台式 计算 机 浏览 器 上 做 初步 测试 ,那么 ,台式 计算 机 上 ,作为 移动 Web 应 
用 的 调试 ,推荐 使 用 Chrome、Firefox、Safari、Opera 和 Internet Explorer。 


24.1.3 网 络 连 接 


开发 环境 必须 有 Wi-Fi 路 由 器 ,这 样 真实 的 移动 设备 可 以 通过 Wi-Fi 连接 到 Web 服务 
器 ,完成 最 后 的 移动 设备 测试 。 


























188 1 移动 Web 应 用 开发 教程 一 -HTML 5+JavaScript 框 架 全 栈 App 开 发 


24.1.4 移动 模拟 器 


可 以 通过 桌面 浏览 器 的 开发 工具 来 模拟 移动 设备 进行 测试 ,也 可 以 安装 独立 的 移动 模 
拟 器 做 测试 。 注 意 ,这 里 的 模拟 器 (Simulator) 不 同 于 仿真 器 (Emulator) ,仿真 器 的 原理 是 
把 移动 底层 API 转换 成 Windows API, 所 以 具有 更 强大 的 硬件 模仿 功能 。 仿 真 器 主要 用 
来 在 台式 计算 机 上 玩 Android 游戏 ,例如 BlueStacks。 移 动 模拟 器 主要 作为 移动 测试 
工具 。 


24.2 桌面 浏览 器 与 移动 浏览 器 

Web 应 用 都 是 基于 浏览 器 环境 下 运行 的 应 用 系统 ,移动 Web 应 用 首先 是 在 桌面 计算 
机 上 开发 ,在 桌面 计算 机 环境 下 模拟 手机 移动 设备 进行 测试 ,但 是 ,最 终 还 是 要 到 移动 设备 
真实 环境 下 进行 测试 。 因 为 桌面 计算 机 无 法 提供 手机 移动 设备 的 一 些 硬件 ,例如 ,GPS、 电 
子 罗盘 、 加 速度 仪 等。 虽然 桌面 与 移动 硬件 环境 有 很 大 差别 ,及 操作 系统 上 的 差别 ,但 是 这 
两 个 因素 都 不 太 重 要 ,最 重要 的 是 移动 浏览 器 和 桌面 浏览 器 的 差别 。 


24.2.1 移动 浏览 器 


每 一 个 移动 操作 系统 都 会 自 带 内 置 浏览 器 ,属于 基本 配置 ,iOS 是 Safari, Android 是 
WebKit, Windows Mobile 是 IE。 内 置 浏览 器 基本 是 与 操作 系统 捆绑 在 一 起 的 ,操作 系统 升 
级 的 时 候 才能 更 新 。 桌 面 版 浏览 器 有 很 多 ,但 是 移动 版 浏览 器 主要 有 Opera、 Firefox、 
Chrome 和 UC。WebView 是 一 个 比较 特殊 的 浏览 器 组 件 , 它 内 置 了 HTML 泻 染 引 擎 ,可 
以 被 原生 应 用 调用 来 显示 HTML 页 面 ,iOS 强制 所 有 可 以 在 Apple Store 商店 下 载 的 浏览 
器 必须 采用 Apple 公司 规定 的 iOS 内 置 浑 染 引 擎 。 所 以 ,在 iOS 系统 下 载 的 浏览 器 基本 是 
一 样 的 ,例如 Chrome 和 Opera Coast。 还 有 一 种 浏览 器 叫 代理 浏览 器 , 它 是 没有 内 置 泻 染 
引擎 的 ,所 以 在 命名 上 加 上 “mini”。 这 些 代理 浏览 器 把 HTTP 请 求 发 送 到 一 个 有 泻 染 引擎 
的 代理 服务 器 上 ,代理 服务 器 把 抓 取 的 HTML 网 页 文件 在 服务 器 端 泻 染 后 ,压缩 打包 发 回 
给 客户 端的 代理 浏览 器 。 例 如 ,Opera Mini 和 UC Mini 浏览 器 。 这 种 代理 浏览 器 主要 是 给 
低 硬 件 配 置 的 手机 使 用 ,并 节省 移动 数据 流 。 缺 点 是 交互 功能 差 ,主要 用 于 阅读 。 


24.2.2 泻 染 引擎 


流行 的 HTML 演 染 引擎 有 WebKit, 是 Android 内 置 浏览 器 的 引擎 ,是 用 得 最 多 的 浏 
览 器 引擎 。Chrome 也 是 Google 开发 的 浏览 器 ,是 基于 Google 开源 浏览 器 Chromium 的 实 
现 版 ,2013 年 后 将 WebKit 改 用 新 的 Blink 泻 染 引擎 ,JavaScript 引擎 还 是 V8。 但 是 ， 
Chrome 浏览 器 和 Android 内 置 浏览 器 还 是 有 一 些 区 别 。 此 外 ,还 有 正 的 Tredent 和 
Firefox 的 Gecko 演 染 引擎 。 但 是 ,即使 都 是 WebKit 的 浏览 器 ,版 本 的 差别 也 影响 到 泻 染 
的 效果 和 对 HTML 5 和 CSS 3 的 支持 程度 。 所 以 ,在 使 用 移动 浏览 器 测试 应 用 时 ,如 果 按 
平均 三 年 手机 的 换代 速度 ,测试 应 该 考虑 三 年 范围 内 的 浏览 器 版 本 。 在 很 多 情况 下 ,手机 用 
户 都 是 使 用 默认 的 内 置 浏览 器 ,虽然 浏览 器 的 版 本 会 和 操作 系统 同步 更 新 ,但 是 Android 操 
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作 系 统 是 一 个 开源 的 系统 ,很 多 手机 生产 厂商 通过 修改 系统 UI 界面 来 与 其 他 厂商 的 系统 
区 分 开 来 ,同时 也 会 对 内 置 的 浏览 器 配置 参数 进行 修改 ,所 以 同 是 一 个 版 本 的 Android 内 
核 ,来 自 不 同 厂商 的 Android 系统 ,浏览 器 泻 染 效果 也 会 有 些 差 别 。Google 公司 在 4. 3 版 
Android 系统 中 把 WebKit 浏览 器 替换 成 带 Blink 引擎 的 Chrome, 也 是 为 了 统一 Android 
浏览 器 的 问题 。 


24.2.3 浏览 器 识别 


为 了 让 Web 应 用 更 好 地 兼容 不 同 的 浏览 器 ,JavaScript 提供 了 浏览 器 信息 查询 接口 , 虽 
然 这 是 一 个 不 可 靠 的 信息 ,因为 这 些 信息 可 以 在 浏览 器 端 进行 重新 设置 修改 ,但 是 有 些 信息 
还 是 有 用 的 ,例如 ,浏览 器 的 版 本 信息 、 操 作 系 统 信 息 。 浏 览 器 又 称 为 用 户 代 理 (User 
Agent) ,通过 下 面 的 代码 userAgent 可 获取 包含 浏览 器 信息 的 字符 串 : 





var ua = window.navigator.userAgent; 





ua 包含 的 信息 会 有 些 不 同 , 例 如 ,Firefox 35 在 Windows 7 下 运行 ,得 到 的 返回 字符 
串 是 ， 





Mozilla/5. 0 (Windows NT 6. 1; WOW64; rv:35.0) Gecko/20100101 Firefox/35. 0Gecko/20100101 
Firefox/35.0 





运行 在 Windows 8 系统 下 的 IE 11 浏览 器 返回 的 userAgent 字符 串 是 : 





Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko 





采用 Chromium 引擎 的 Opera 25 版 在 Windows 7 下 运行 的 信息 如 下 : 





Mozilla/5. 0 (Windows NT 6.1; WOW64) AppleWebKit/537. 36 (KHTML, like Gecko) Chrome/38. 0. 
2125. 101 Safari/537.36 OPR/25.0.1614.50 











如 果 是 Android 版 的 Opera ,还 会 出 现 “mobile" 信 息 。 
这 里 还 有 一 个 在 线 检查 浏览 器 信息 的 工具 : https://whichbrowser. net/ 。 


24.3 ”通过 桌面 浏览 器 做 移动 测试 


24.3.1 专用 HTTP 测 试 工具 


针对 HTTP 协议 的 浏览 器 测试 插件 常常 用 来 模拟 发 送 HTTP 请 求 , 设 置 HTTP 请 求 
方法 ,例如 get、post、put 和 delete 等 ,以 及 修改 headers 的 参数 和 body 请 求 体 信息 ,通过 服 
务 器 端 返回 HTTP 响应 结果 ,来 分 析 测 试 Web 应 用 。 常 用 的 HTTP 测试 插件 有 : 

。 FireFox 浏览 器 的 RestClient。 
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。 Chrome 浏览 器 的 Postman。 

除了 浏览 器 HTTP 测试 插件 外 ,Postman 也 提供 独立 的 客户 端 程序 ,到 官网 https:// 
www. getpostman. com/ 下 载 . 可 以 选择 Windows、MacOS 和 Linux 版 本 。 此 外 ,还 有 一 个 
强大 的 HTTP 命令 行 工具 curl, 完 全 可 以 模拟 浏览 器 的 HTTP 行为 ,利用 URL 语法 ,通过 
命令 行 窗口 与 Web 服务 器 交互 。 早 期 主要 应 用 于 UNIX 和 Linux, 现 在 也 提供 Windows 
的 移植 版 本 。 可 以 到 官网 : https://curl. haxx. se/download. html 选择 合适 的 版 本 安装 。 


24.3.2 使 用 开发 者 工具 


浏览 器 本 身 就 是 一 个 测试 平台 ,在 多 数 浏览 器 中 会 默认 安装 了 一 个 开发 者 (Developer) 
工具 ,虽然 每 一 个 浏览 器 的 开发 者 工具 有 些 不 同 ,但 是 都 会 有 一 个 可 以 测试 移动 设备 的 模拟 
功能 ,及 前 端 代码 调试 功能 。 下 面具 体 介绍 不 同 浏览 器 开发 者 (Developer) 工 具 的 移动 设备 
模拟 功能 。 

(1) IE 浏览 器 的 开发 者 工具 ,有 仿真 功能 ,可 以 在 桌面 浏览 器 上 模拟 测试 Windows 
Phone 下 的 Web 应 用 ,甚至 还 提供 模拟 GPS 的 功能 ,如 图 24-1 所 示 。 
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图 24-1 IE 浏 览 器 的 开发 者 工具 的 仿真 移动 功能 


(2) Chrome 浏览 器 的 开发 者 工具 提供 有 移动 设备 模拟 的 功能 ,可 以 模拟 不 同 厂 商 移动 
设备 的 分 辨 率 来 测试 Web 应 用 ,如 图 24-2 所 示 。 
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图 24-2 Chrome 浏览 器 的 开发 者 工具 移动 设备 模拟 功能 
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(3) Firefox 浏览 器 的 开发 者 工具 下 的 移动 设备 模拟 功能 ,提供 了 不 同 设备 分 辨 率 、 自 
定义 分 辨 率 、 模 拟 触 屏 、 屏 幕 旋转 ,如 图 24-3 所 示 。 


单 页 应 用 有 那些 优 缺点 ? 


现在 很 多 web 应 用 都 采用 了 单 页 应 用 ， 但 单 页 应 用 
就 好 吗 ? 它 有 那些 优 缺 点 呢 ? 请 指教 


5 个 回答 


clia 





图 24-3 Firefox 浏览 器 的 开发 者 工具 的 响应 式 设计 测试 功能 


24.3.3 修改 桌面 浏览 器 用 户 代理 


Web 应 用 的 http 请 求 头 信息 包含 用 户 代 理 (User Agent) 信 息 , Web 服务 器 端 会 根据 
这 个 信息 来 判断 http 请 求 是 否 来 自 移动 端 浏览 器 ,并 决定 向 客户 端 发 送 移动 端的 特定 资源 
或 模板 。 一 些 桌 面 浏 览 器 修改 http 请 求 头 的 User Agent 信息 。 

Safari 浏览 器 在 * 开 发 "菜单 中 提供 了 用 户 代 理 的 修改 设置 ,可 以 将 桌面 的 浏览 器 修改 
成 为 iOS 或 Android 的 用 户 代理 浏览 器 ,来 假装 一 个 来 自 移动 浏览 器 端的 请 求 。 

Chrome 浏览 器 通过 User-agent Switcher 插件 也 可 以 改变 用 户 代理 设置 ,模仿 一 个 来 
自 iOS 或 Android 移动 浏览 器 的 请 求 。 





24.4 移动 设备 模拟 器 

移动 设备 模拟 器 就 是 在 台式 计算 机 上 安装 一 个 可 以 模拟 移动 设备 的 运行 环境 ,甚至 可 
以 运行 移动 应 用 的 软件 。 为 什么 要 使 用 移动 设备 模拟 器 呢 ? 最 大 的 原因 是 我 们 不 可 能 在 一 
个 小 屏幕 设备 上 开发 应 用 代码 ,几乎 所 有 的 移动 应 用 开发 都 是 在 台式 计算 机 上 完成 的 。 当 
然 , 也 有 用 户 用 移动 设备 模拟 器 来 在 台式 计算 机 上 运行 Android 游戏 。 作 为 移动 应 用 开发 
人 员 ,大 部 分 时 间 都 是 在 台式 计算 机 上 先 做 测试 ,来 减少 开发 成 本 ,况且 也 不 可 能 在 所 有 移 
动手 机 上 做 测试 。 


24.4.1 在 线 模拟 网 站 
打开 http://www. responsinator. com 移动 模拟 网 站 ,输入 要 测试 的 URL 地 址 , 它 可 
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以 马上 模拟 iPhone 5 iPhone 6、iPad、Google Nenux 4 
(Android) 等 移动 设备 的 横 屏 、 竖 屏 的 效果 ,主要 用 于 响 
应 式 Web 的 测试 。 

Ipadpeek. com 是 一 个 模拟 iPad/iPhone 的 在 线 模 
拟 器 。 

Iphone5simulator. com 可 以 提供 更 细微 的 iPhone 4、 
iPhone 5\iPhone 5S 和 5C 的 模拟 界面 ,如 图 24-4 所 示 。 

在 线 模拟 器 也 有 一 些 缺 点 ,有 的 在 线 模拟 器 并 不 能 
保证 更 新 到 最 新 设备 ,有 些 网 站 没有 持续 维护 而 失效 。 
此 外 ,大 多 数 在 线 模拟 器 不 能 做 本 地 测试 ,也 就 是 说 ,要 
把 Web 应 用 先 上 载 到 服务 器 端 ,并 有 域名 才能 测试 。 


24.4.2 ”模拟 器 软件 图 24-4 iPhone 在 线 模拟 的 效果 


打开 http://www. opera. com/zh-cn/developer/mobile-emulator 下 载 Opera Mobile 
Emulator, 安 装 到 桌面 系统 后 ,可 以 选择 模拟 各 个 厂商 的 设计 型 号 ,也 可 以 通过 设置 设备 分 
辨 率 、 像 素 密 度 自 定义 一 个 模拟 移动 设备 环境 


24.4.3 浏览 器 插件 的 移动 模拟 器 


Ripple Emulator 是 一 个 Chrome 的 扩展 , 它 可 以 模拟 每 个 移动 设备 的 详细 信息 ,例如 
user_Agent、Geolocation 等 ,在 不 同 的 平台 上 测试 HTML 5 移动 应 用 。 它 还 可 以 支持 
Blackberry WebWorks and PhoneGap 的 测试 。 打 开 的 Ripple Emulator 界面 如 图 24-5 
所 示 。 











图 24-5 ”Ripple Emulator 的 界面 


中 间 是 模拟 手机 的 屏幕 ,左右 两 边 是 设置 区 域 ,可 以 单 击 *<” 或 “一 ”按钮 关闭 设置 区 
域 。 它 还 内 置 了 PhoneGap 的 Device API, 可 以 用 来 测试 PhoneGap/Cordava 的 应 用 开发 ， 
通过 “http://localhost:4400” 来 访问 PhoneGap/Cordava 的 应 用 。 所 以 , 它 可 以 用 桌面 的 浏 
览 器 测试 PhoneGap Accelerometer API 的 加 速度 计 的 功能 、Geolocation API 地 理 位 置 功 
能 .Camera API 摄像 头 功能 (通过 加 载 一 个 照片 文件 ) 和 Compass API 指南 针 功 能 。 
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24.4.4 厂商 SDK 开发 工具 包 自 带 模拟 器 


每 一 个 移动 操作 系统 都 会 为 开发 者 提供 原生 的 SDK 开发 工具 包 。 下 载 安装 Google 公 
司 的 Android SDK 开发 包 , 通 过 SDK Manager 选择 安装 一 个 Android 版 本 的 System 
Image 系统 镜像 文件 ,再 通过 Android Virtual Devices(AVD)Manager 虚拟 设备 管理 器 来 
创建 一 个 模拟 器 。 

Xcode 是 运行 在 操作 系统 Mac OS X 上 的 集成 开发 工具 (IDE) ,大 多 数 OS X 和 iOS 应 
用 程序 是 通过 Xcode 工具 开发 的 。Xcode 本 身 就 自 带 iOS 模拟 器 ,可 以 模拟 不 同 的 iOS 
版 本 。 


24.4.5 虚拟 机 下 的 模拟 器 


通过 虚拟 机 平台 ,例如 Virtualbox、VMware Workstation 虚拟 机 平台 ,来 安装 真实 的 移 
动 操作 系统 。 虚 拟 机 可 以 直接 将 被 虚拟 的 操作 系统 调用 传 给 底层 真实 硬件 CPU 和 GPU。 
目前 ,iOS 和 Android 都 提供 了 x86 虚拟 机 镜像 (VM images) ,也 就 是 说 ,可 以 安装 在 台 
计算 机 上 的 模拟 机 ,用 来 做 移动 测试 。 


24.5 远程 测试 


如 果 仅 仅 做 PC 上 的 应 用 测试 是 不 全 面 的 ,必须 在 最 后 一 关 进 行 移动 设备 上 的 测试 。 
由 于 移动 设备 屏幕 尺寸 的 限制 ,测试 的 方法 是 移动 设备 通过 USB 线 或 Wi-Fi 网 络 连 接 到 开 
发 服务 器 ,访问 Web 应 用 ,通过 PC 浏览 器 十 手机 浏览 器 的 远程 调试 模式 完成 测试 。 也 就 
是 说 ,手机 浏览 器 打开 ,并 操作 Web 应 用 ,同时 在 PC 浏览 器 端 同步 观察 到 测试 结果 来 调试 
代码 。 

下 面 是 常用 的 移动 远程 调试 工具 。 

(1) Chrome 浏览 器 的 开发 者 工具 提供 Remote Device 远程 设备 连接 。 首 先 ,在 PC 和 
Android(4.0 版 以 上 ) 移 动 设备 两 边 都 安装 了 Chrome(32 版 以 上 ) 浏 览 器 ,把 Android 移动 
设备 通过 USB 接口 连接 到 PC 上 ,如 图 24-6 所 示 。 





{Console Remote devices x 


Devices Settings 

Remote Target 

® Connected 国 Discover USB devices 

YQ607 Need help? Read Chrome remote debugging documentation 


® Connected 








图 24-6 ”Chrome 桌面 浏览 器 的 开发 者 工具 连接 上 一 个 Android 设备 


在 PC 上 打开 开发 者 工具 的 remote devices 选项 ,在 移动 端 打 开 Chrome, 输 入 URL 测 
试 网 址 来 完成 远程 调试 。 具 体 教 程 见 https://developers. google. com/web/tools/chrome- 
devtools/remote-debugging/?utm_source 一 dcc&utm_medium 一 redirect& utm_campaign 一 


2016q3。 更 多 的 远程 测试 介绍 如 下 。 
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(2) Firefox for Android 十 ADB。 首 先 ,必须 在 PC 和 Android 移动 设备 两 边 都 安装 
Firefox 浏览 器 ,通过 USB 把 这 两 个 设备 连接 ,并 在 PC 上 安装 Android SDK 开发 包 , 通 过 
ADB 命令 行 工具 及 Firefox 浏览 器 设置 建立 连接 ,通过 开发 者 工具 远程 调试 移动 Web 应 用 代 
码 。 具 体 教 程 见 https://developer. mozilla. org/en-US/docs/Tools/Remote_Debugging/ 
Firefox_for _ Android。 

(3) Safari Web Inspector-Safari on iDOS。 通 过 Safari 浏览 器 远程 测试 Apple iOS 移动 
设备 的 Web 应 用 。 具 体 教程 见 https://developer. apple. com/library/content/ documentation/ 
AppleApplications/Conceptual/Safari _ Developer _ Guide/GettingStarted/GettingStarted. 
html#//apple_ref/doc/uid/TP40007874-CH2-SW1.。 

(4) Weinre 是 运行 于 Node. js 环境 下 的 一 个 应 用 ,对 于 没有 远程 调试 工具 的 浏览 器 ,可 
以 通过 Weinre 达到 远程 调试 目的 。 具体 教程 见 http://people. apache. org/~ pmuellr/ 


weinre/docs/latest/Installing. html。 


24.6 ”Web 软件 测试 范围 


一 个 软件 应 用 开发 的 最 后 一 个 环节 是 软件 测试 ,测试 手段 主要 是 单元 测试 和 集成 测试 。 
而 软件 测试 主要 模型 有 测试 驱动 开发 (Test Driven Development,TDD) 和 行为 驱动 开发 
(Behavior Driven Development,BDD)。TDD 更 关注 于 测试 接口 设计 ,是 一 种 软件 设计 思 
想 ,也 就 是 在 写 代 码 的 时 候 就 考虑 软件 测试 的 需求 定义 。BDD 更 注重 业务 设计 ,让 用 户 与 
开发 者 更 好 地 沟通 ,完成 软件 开发 测试 过 程 。 


24.6.1 单元 测试 


单元 测试 是 测试 软件 功能 最 基本 的 要 求 , 对 于 Web 应 用 ,需要 测试 所 有 的 代码 ,包括 
HTML、CSS 和 JavaScript 是 否 正常 地 工作 ? 基本 功能 是 否 实现 ? 这 些 功能 基本 是 在 前 端 
实现 的 ,所 以 也 叫 页 面 测 试 。 软 件 开发 首先 通过 浏览 器 内 置 的 开发 者 工具 来 完成 软件 调试 ， 
调试 可 以 说 是 手工 简单 测试 ,还 需 更 多 的 自动 化 测试 工具 来 完成 测试 。 

IDE 集成 开发 工具 ,例如 NetBeans、Eclipse 都 有 针对 Web 的 单元 测试 插件 ,也 可 以 单 
独 安装 这 些 单元 测试 工具 ,主要 有 以 下 两 个 。 

(1) Jasmine: 是 一 个 采用 BDD 的 单元 测试 框架 ,运行 于 Node. js 环境 ,是 一 个 不 依赖 
浏览 器 、 开 发 框架 的 测试 工具 ,是 基于 行为 驱动 开发 (Behaviour Driven Development) 的 框 
架 , 让 用 户 可 以 容易 地 参与 编写 测试 用 例 。 

(2) Karma: 是 一 个 运行 于 Node. js 的 JavaScript 测试 管理 工具 ,用 来 测试 浏览 器 端的 
功能 ,可 以 和 代码 编辑 器 一 起 集成 使 用 ,通过 编写 一 个 配置 文件 ,Karma 就 会 自动 找到 系统 
中 装 好 的 浏览 器 执行 代码 ,通过 console. log 显示 测试 结果 。 


24.6.2 端 到 端 测试 


基于 B/S 应 用 ,必然 涉及 服务 器 端 ,如 果 服 务 器 端的 代码 是 PHP、Python、JSP、Node. js 
等 ,服务 器 可 能 还 提供 一 些 其 他 服务 ,例如 ,数据库 .RESTful 服务 、WebSocket 通信 或 离线 
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应 用 功能 等 ,所 以 ,软件 测试 要 在 浏览 器 与 服务 器 连接 的 环境 下 完成 。 端 到 端 测试 相当 了 
件 测试 的 集成 测试 ,也 叫 跨 页 测试 , 较 流 行 的 端 到 端 测 试 工具 主要 有 以 下 几 个 。 

Protractor: 一 个 主要 针对 AngularJS 的 测试 框架 ,运行 于 Node. js 环境 下 的 端 到 端 测 
试 工具 。 

Mocha: 最 流行 的 基于 TDD/BDD 测试 模型 的 JavaScript 测试 框架 ,在 浏览 器 和 Node. 
js 环境 都 可 以 测试 。Mocha 还 需要 与 assert 断言 库 结合 使 用 ,例如 ,cai、should 断言 库 。 

Grunt: 强大 的 软件 测试 管理 集成 工具 ,用 于 构建 版 本 的 持续 集成 (CT) 。 特 别 适合 团队 
开发 环境 , 当 队 员 向 版 本 管理 服务 器 提交 代码 的 时 候 , 配 置 好 的 Grunt 会 自动 实时 对 项 目 
进行 测试 ,可 以 把 多 个 测试 框架 ,例如 Mocha 集成 管理 ,并 且 可 以 通过 邮件 输出 报告 给 每 一 
个 团队 成 员 。 


24.6.3 UI 与 浏览 器 兼容 测试 


响应 式 布局 测试 是 移动 Web 应 用 测试 最 多 的 功能 之 一 ,测试 不 同 屏幕 宽度 和 断 点 的 响 
应 ,同时 ,也 要 做 横 屏 竖 屏 的 响应 测试 。 用 户 界面 测试 还 包括 布局 颜色、 按钮 .导航 栏 . 菜 
单 、 表 单 、 图 片 .数据 表格 的 显示 效果 。 由 于 移动 设备 屏幕 的 特殊 性 ,还 需要 在 真实 移动 设备 
上 测试 交互 功能 ,特别 是 触摸 屏 的 手势 效果 滑动. 单 击 、 缩 放 等 。 所 以 ,UI 测试 更 注重 用 户 

虽然 HTML 5 的 标准 已 经 正式 发 布 ,但 是 各 个 浏览 器 厂商 对 HTML 5 所 有 功能 的 支 
持 程 度 还 是 有 差别 ,在 Web App 正式 上 线 前 ,除了 手工 对 各 种 常用 浏览 器 进行 测试 外 ,建议 
还 要 通过 一 些 在 线 测试 工具 完成 HTML 5 标准 和 浏览 器 兼容 测试 ,特别 是 不 同 浏览 器 采用 
的 HTML 演 染 引擎 和 JS 引擎 不 同 ,对 UI 的 影响 显著 ,所 以 还 需要 完成 浏览 器 兼容 性 测 
试 。 下 面 介绍 儿 个 在 线 测试 工具 。 

(1) W3C Markup Validation Services(http://validator. w3. org/): 测试 Web 应 用 是 
否 符合 HTML 的 规范 标准 ,及 跨 浏 览 器 兼容 性 、Web 页 面 加 载 速度 检查 ,可 以 上 传 Web 代 
码 文件 或 通过 URI 进行 检查 。 

(2) 浏览 器 截图 (http://browsershots. org/): 浏览 器 兼容 测试 ,针对 不 同 的 操作 系统 
和 浏览 器 引擎 (Gecko, KHTML/WebKit) 测 试 , 主 要 是 针对 台式 计算 机 的 浏览 器 。 

(3) 屏幕 查询 (http://beta. screenqueri. es/) : 免费 的 响应 式 设计 在 线 测试 。 它 模拟 了 
30 个 不 同 的 设备 预 设 , 来 检测 网 站 的 响应 式 设计 。 


24.6.4 性 能 测试 


性 能 测试 主要 考虑 三 个 方面 : 客户 端 性 能 、 服 务 器 端 性 能 及 网 络 性 能 。 

客户 端 性 能 测试 会 与 HTML、CSS 和 JavaScript 有 关联 ,大 容量 的 HTML 页 面 和 过 度 
的 CSS 特效 及 复杂 的 JavaScript 程序 结构 会 影响 到 App 的 客户 端 性 能 表现 。 此 外 ,HTTP 
的 网 络 协议 的 一 些 特征 也 对 性 能 产生 影响 ,其 中 影响 最 大 的 特性 是 客户 端的 缓存 技术 ,缓存 
参数 的 设置 对 性 能 影响 非常 重要 。 由 于 客户 端的 运行 环境 是 在 浏览 器 里 面 , 所 以 ,浏览 器 的 
性 能 优化 是 很 重要 的 一 个 方面 。 浏 览 器 本 身 就 带 有 测试 工具 插件 ,例如 ,前 面 提 到 的 
Developer 开发 者 工具 、Firebug 都 可 以 做 网 络 性 能 测试 ,缓存 测试 ,检查 HTTP 参数 的 
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设置 。 

解决 客户 端 性 能 的 一 些 建议 如 下 。 

(1) 采用 HTML 5 离线 技术 减少 访问 服务 器 的 频率 。 

(2) 网 页 文件 .图 片 尽量 进行 优化 处 理 。 

(3) 针对 移动 Web 应 用 的 优化 处 理 。 

服务 器 端的 性 能 测试 比 前 端 测试 要 复杂 得 多 ,需要 更 专业 的 测试 工具 ,例如 LoadRunner 
商业 测试 工具 来 做 服务 器 端的 测试 。 服 务 器 端 测试 的 性 能 指标 主要 有 以 下 几 个 方面 。 

(1) 负载 测试 : 通过 模拟 在 线 用 户 的 访问 数 来 测试 性 能 。 

(2) 压力 测试 : 了 解 性 能 的 极限 和 拐点 , 即 在 性 能 达到 极限 的 情况 下 服务 器 的 表现 行 
为 ,通过 压力 测试 来 分 析 应 用 构架 、 组 件 和 编码 的 优化 。 

(3) 耐久 性 测试 : 测试 系统 是 否 能 提供 24X7 小 时 的 在 线 服 务 ,系统 长 时 间 运 行 是 否 会 
变 慢 ? 

(4) 可 扩展 性 测试 : 测试 应 用 系统 是 否 可 以 适应 业务 的 增长 需求 。 不 需要 修改 更 多 的 
代码 ,通过 调整 后 端 设置 负载 均衡 设置 .新 增 服务 器 硬件 等 措施 来 适应 并 解决 性 能 的 瓶颈 。 

(5) 基准 测试 : 通过 标准 化 的 测试 套件 进行 测试 。 可 以 是 内 部 自 定义 的 标准 化 套件 或 
对 外 公开 的 标准 化 套件 进行 性 能 测试 。 

随 着 移动 网 络 技 术 的 快速 发 展 ,移动 网 络 从 3G 基本 升级 到 4G 时 代 , 并 准备 进入 5G 
时 代 。 目 前 流行 的 4G 通信 速度 理论 达到 100Mb/s, 实 际 测试 平均 速度 在 10Mb/s,3G 实际 
测试 平均 速度 在 4Mb/s。 目 前 的 Wi-Fi 技术 也 在 不 断 升 级 ,从 最 高 速率 2Mb/s 的 802. 11 
到 2013 年 新 的 3. 6Gb/s 速度 的 802. 11ac 标准 也 开始 进入 市 场 ,虽然 目前 家 庭 的 Wi-Fi 网 
络 基本 在 150~450Mb/s 之 间 , 从 上 面 的 数据 分 析 可 知 , 无 线 网 络 技 术 已 经 可 以 保证 我 们 的 
移动 Web 应 用 要 求 , 但 是 在 网 络 性 能 测试 上 ,还 需 考虑 到 两 个 方面 问题 ,一 个 是 移动 通信 的 
费用 成 本 , 另 一 方面 是 无 线 网 络 速度 容易 受 外 部 环境 影响 。 无 线 网 络 是 共享 网 络 ,在 某 一 个 
区 域内 共享 设备 多 或 少 对 网 络 速度 影响 很 大 ,还 有 信号 的 质量 也 会 对 网 络 速度 造成 影响 。 

浏览 器 开发 者 工具 提供 了 网 络 测试 工具 ,可 以 测试 从 服务 器 端 下 载 的 每 一 个 资源 所 需 
要 的 时 间 , 如 图 24-7 所 示 是 360 极速 浏览 器 打开 https://hao. 360. cn, 通 过 开发 者 工具 观 
察 的 网 络 瀑布 图 ,总 共 花 了 3. 14s 才 完 成 加 载 。 
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24-7 开发 者 工具 测试 的 网 络 性 能 图 


移动 Web 应 用 的 网 络 性 能 优化 应 该 考虑 下 面 几 个 问题 。 
(1) 采用 HTML 5 的 离线 缓存 技术 ,来 解决 移动 设备 经 常 断 网 问题 。 
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(2) 采用 HTML 5 的 LocalStorage 存储 技术 来 在 客户 端 保存 数据 ,减少 对 服务 器 数据 
的 依赖 。 

(3) 通过 网 络 性 能 测试 ,发 现 消耗 网 络 带 宽 最 大 的 资源 来 做 优化 。 

除了 网 络 性 能 测试 ,浏览 器 泻 染 网 页 的 性 能 也 是 一 个 主要 的 性 能 测试 指标 ,不 同 的 浏览 
器 开发 者 工具 都 提供 性 能 测试 ,图 24-8 是 通过 Microsoft Edge 浏览 器 测试 www. baidu. 
com 页 面 , 得 到 的 开发 者 工具 的 性 能 图 。 
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图 24-8 Microsoft Edge 浏览 器 性 能 测试 


性 能 测试 主要 分 成 以 下 几 大 事件 。 

(1) 正在 加 载 (Loading) : 页 面 加 载 事件 ,包括 CSS 解析 、HTML 解析 、HTTP 请 求 的 
事件 。 

(2) 脚本 (Scripting) : 处 理 和 执行 JavaScript 的 事件 ,包括 动画 帧 回调 .DOM 事件 、 脚 
本 赋值 定时、 媒体 查询 监听 事件 。 

(3) 垃圾 回收 (GC): 清理 内 存 的 垃圾 变量 。 

(4) 样式 (Styling) : 布局 及 与 CSS 样式 有 关 的 元 素 位 置 大 小 改变 的 计算 。 

(5) 呈现 (Rendering): 将 HTML 元 素 显示 到 屏幕 ,包括 画图 .图 像 解码 。 

(6) 其 他 与 浏览 器 有 关 的 计算 。 

从 CPU 利用 率 看 ,脚本 和 GC( 垃 圾 回收 ) 占 用 较 多 的 CPU 时 间 , 从 时 间 线 的 事件 名 
看 ,布局 和 画图 事件 发 生 最 多 。 根 据 这 些 数据 ,可 以 找到 代码 需要 优化 的 地 方 。 


24.6.5 安全 要 求 


在 原生 应 用 方面 ,安全 问题 一 直 得 到 很 好 的 控制 ,首先 是 应 用 商店 就 已 经 进行 了 第 一 道 
门 的 把 关 , 有 安全 问题 的 应 用 会 拒 之 门 外 , 特 别 是 iOS 的 应 用 ,审查 机 制 非常 严格 。 对 于 
Android 系统 ,有 不 同 的 Android 定制 版 应 用 商店 ,安全 管理 就 没有 那么 严格 。 但 是 ,原生 
应 用 的 安装 有 一 个 用 户 授权 过 程 , 当 用 户 安装 一 个 原生 应 用 时 ,系统 会 提示 用 户 ,这 个 App 
会 访问 哪些 资源 ,例如 ,摄像 关 、 通 讯 簿 等 ,让 用 户 在 授权 的 情况 下 完成 安装 。 而 移动 Web 
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应 用 的 安全 问题 ,与 各 个 浏览 器 厂家 有 关 , 例 如 ,用 Firefox 浏览 器 访问 摄像 头 或 地 理 位 置 
信息 都 会 弹出 用 户 授权 许可 的 提示 窗 , 如 图 24-9 所 示 。 
多 HTML5 camera 


€ Om localhost/ch22/camerahtml © Q 


@oisal (Wo slow localhost to use your camera? 


Camera to share: 





Integrated Webcam 
口 Remember this decision 











图 24-9 Firefox 浏览 器 访问 摄像 头 的 用 户 授权 窗口 


而 Google 的 50 以 上 版 本 的 Chrome 浏览 器 要 求 访问 地 理 位 置信 息 必须 用 HTTPS 安 
全 协议 连接 ,所 以 ,在 移动 Web 应 用 开发 编码 过 程 中 ,在 一 些 访问 涉及 安全 隐私 问题 时 , 考 
虑 切换 HTTPS 安全 协议 ,包括 在 线 支付 的 安全 保证 。 

常见 的 Web 安全 问题 如 下 。 

(1) 跨 站 脚本 攻击 (Cross Site Scripting,XSS) : 在 网 页 中 典 入 客户 端 攻击 脚本 , 当 用 户 
打开 网 页 时 ,脚本 就 会 在 浏览 器 端 执行 ,获取 客户 端的 信息 或 导航 到 恶意 网 站 ,从 而 达到 攻 
击 者 的 目的 。 

(2) SQL 注入 攻击 : 在 Web 表单 提交 或 页 面 请 求 过 程 中 ,攻击 者 会 在 URL 的 查询 字 
符 串 中 插入 SQL 代码 ,传送 到 服务 器 端 ,执行 恶意 的 SQL 命令 。 

(3) SSL 劫持 攻击 : 攻击 者 通过 在 用 户 与 服务 器 之 间 拦 截获 得 HTTPS 传输 的 明文 数 
据 , 然 后 伪造 服务 器 发 给 浏览 器 证 书 ,之 后 用 来 解密 传输 中 的 数据 。 

(4) SSLStrip 攻击 : 攻击 者 也 是 在 用 户 和 服务 器 之 间 截 获 HTTPS 的 访问 地 址 ,并 修 
改 成 HTTP 返回 给 用 户 浏览 器 ,如 果 用 户 继续 用 HTTP 操作 ,攻击 者 会 轻易 截获 用 户 的 信 
息 , 如 登录 账号 .密码 。 


练习 


1. Navigator 对 象 除了 能 提供 navigator. userAgent 用 户 代 理 报头 信息 ,还 可 以 提供 访 
问 浏 览 器 的 更 多 信息 ,用 QQ 浏览 器 打开 : http://www. w3school. com. cn/jsref/prop_nav 
_useragent. asp, 里 面 有 浏览 器 检查 代码 ,看 看 QQ 浏览 器 用 的 是 哪 一 个 开源 浏览 器 内 核 ? 

2. 打开 浏览 器 ,用 http://mail. qq. com 访问 QQ 邮箱 ,看 看 URL 地 址 是 否 自动 切换 
成 HTTPS 协议 ? 





在 B/S 应 用 架构 中 ,我 们 关注 于 浏览 器 端的 开发 多 于 服务 器 
端的 ,虽然 所 有 的 代码 都 是 存储 在 服务 器 ,我 们 花 很 多 时 间 写 的 
代码 都 是 由 HTML+ CSS+ JavaScript 组 成 的 。 但 是 ,现在 我 们 说 
的 Web 应 用 ,已 经 不 是 传统 的 网 站 开发 概念 了 ,没有 服务 器 端 运 
行 的 代码 ,根本 就 不 能 算是 一 个 完整 的 Web 应 用 系统 。 早 期 的 
Web 开发 分 工 非常 清楚 ,用 HTML 十 CSS 十 JavaScript 语言 开发 的 
工程 师 只 能 称 为 网 页 设计 师 , 而 服务 器 端 开发 的 工程 师 才 是 程序 
员 ,因为 要 用 到 PHP、JSP、C# .Ruby 等 计算 机 语言 。 但 是 , 随 着 
Node.js 成 功 地 让 JavaScript 成 为 服务 器 运行 环境 语言 , 基于 
Node.js 的 软件 生态 圈 日 益 扩大 ,各 种 基于 JavaScript 的 应 用 开 
发 框架 逐渐 成 为 主流 , 例如 , AngularJS、Vue. js、Backbone. js、 
Ember.js 等 。 况 且 , 随 着 移动 Web 应 用 的 开发 热潮 ,一 个 Web 移 
动 应 用 开发 者 必须 具有 前 端 (浏览 器 ) 和 后 端 (服务 器 ) 的 开发 技 
能 ,这 就 是 下 面 要 学 习 的 目标 一 一 全 栈 开发 。 

全 栈 开发 主要 得 益 于 技术 的 进步 , 云 计 算 平台 例如 ,Heroku、 
Google Cloud、Azure、AWS, 让 服务 器 端 管 理 更 简单 ,NoSQL 数据 
库 MongoDB、Redis 等 ,让 数据 库 管理 更 简单 ,各 种 Web 开发 框架 
简化 了 Web 编程 ,所 有 这 些 技术 的 完美 结合 ,构造 出 一 个 全 栈 开 
发 环境 。 
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全 栈 Web 开 发 


全 栈 开 发 者 (Full Stack Developer) 要 求 互 联网 软件 项 目的 开发 人 员 应 该 具有 全 局 的 思 
维 理念 ,也 就 是 说 通过 多 种 技术 结合 ,来 完成 一 个 互联 网 应 用 的 开发 ,这 些 技术 包括 前 端的 、 
后 端的 数据库、.UI 设计 、 移 动 的 响应 式 设计 等 。 早 期 的 Web 应 用 开发 ,基本 上 分 为 前 端 和 
后 端 ,后 端 用 PHP、 微 软 的 ASP 或 者 是 Java 的 JSP 等 其 他 计算 机 语言 技术 ,而 前 端 开发 人 
员 很 少 接触 这 些 高 级 的 计算 机 语言 。 但 是 , 随 着 互联 网 的 普及 ,早期 的 互联 网 应 用 是 以 网 站 
开发 为 主流 ,或 者 说 是 以 静态 网 页 为 主流 的 应 用 ,而 今天 已 经 进入 了 一 种 新 的 商业 应 用 模 
式 , 特 别 是 移动 App 的 流行 ,促进 了 各 种 新 的 技术 不 断 出 现 ,例如 ,Node.js 和 Python 语言 
技术 ,各 种 框架 和 模块 化 的 开发 ,使 得 系统 架构 师 不 得 不 全 盘 考 虑 一 个 应 用 软件 系统 应 该 采 
用 哪些 技术 来 完成 这 个 项 目 。 同 时 也 要 求 Web 开发 工程 师 ,不 仅 会 前 端的 设计 ,还 要 掌握 
网 络 技术 ,包括 TCP/IP 网 络 协 议 、Socket 协议 等 ,还 要 了 解 服务 器 端的 开发 环境 ,例如 
Web 服务 器 ,数据 服务 器 连接 后 台 的 脚本 语言 。 过 去 的 Web 开发 分 工 明确 ,开发 Web 的 人 
力 资源 成 本 高 , 随 着 Web 开发 技术 的 不 断 进步 ,及 移动 Web 开发 带 来 了 新 技术 革命 ,例如 ， 
HTML 5 和 各 种 移动 Web 应 用 框架 的 流行 ,让 传统 的 Web 开发 技术 HTML 十 CSS 十 
JavaScript 把 前 后 端 开发 融合 ,也 就 是 今天 提出 的 全 栈 Web 开发 。Web 新 技术 革命 降低 了 
我 们 的 学 习 曲 线 , 让 培养 一 个 全 栈 Web 软件 开发 工程 师 成 为 可 能 。 


25.1 Web 开发 三 层 软件 架构 


作为 一 个 全 栈 开发 者 ,首先 必须 了 解 软件 的 三 层 开发 架构 。 软 件 的 三 层 开发 架构 是 针 
对 于 网 络 应 用 项 目的 一 种 开发 模型 。 

第 一 层 是 表现 层 , 也 就 是 用 户 的 界面 ,是 一 个 应 用 软件 的 最 顶层 ,在 这 一 层 , 用 户 可 以 直 
接 访问 Web 页 面 ,操作 系统 的 GUI 界面 。 在 这 一 层 , 基 于 Web 应 用 的 计算 机 语言 
HTML 十 CSS 十 JavaScript, 可 以 更 强调 使 用 HTML 5 十 CSS 3 技术 ,甚至 大 量 使 用 框架 编 
程 ,例如 ,本 书 提 到 的 AngularJS、BootStrap 前 端 框架 。 

第 二 层 是 应 用 层 或 者 称 为 逻辑 业务 层 , 主 要 是 实现 和 控制 软件 的 某 一 个 功能 需求 详细 
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流程 ,是 应 用 系统 的 核心 层 , 需 要 用 到 面向 对 象 编程 或 框架 进行 编程 。 基 于 Web 应 用 的 计 
算 机 应 用 有 PHP、Ruby on the Rails、JSP、ASP、Python、Perl 及 Node. js(JavaScript 的 服务 
器 端 编程 ) 。 

第 三 层 是 数据 层 ,包括 数据 的 持久 化 机 制 , 例 如 数据 库 或 者 文件 共享 ,数据 的 访问 和 查 
询 都 在 这 一 层 来 完成 。 用 到 的 关系 数据 库 系 统 是 MySQL、MongoDB 等 ,在 这 一 层 有 可 能 
涉及 非 关 系数 据 的 存储 。 

而 针对 于 B/S 的 Web 开发 应 用 软件 系统 ,都 是 应 用 三 层 软件 架构 来 开发 的 ,我 们 说 的 
前 端 开发 (浏览 器 端 ) 就 是 处 于 第 一 层 , 而 后 端 开发 (服务 器 端 ) 就 是 处 于 第 二 层 和 第 三 层 。 
最 常用 的 Web 开发 是 MVC 模型 。 

(1) View 表示 三 层 软 件 架 构 的 第 一 层 , 也 称 之 为 视图 层 、 用 户 界面 层 、 表 示 层 。 

(2) Contbrol 一 一 表示 控制 层 ,相当 于 三 层 软件 架构 的 第 二 层 , 人 逻辑 业务 层 。 

(3) Model 一 一 数据 模型 ,相当 于 三 层 软 件 架构 的 第 三 层 数据 层 。 











25.2 全 栈 Web 开发 的 三 层 软 件 架构 

这 里 的 全 栈 Web 开发 是 基于 Node.js 的 系统 ,再 加 上 HTML 十 CSS 十 JavaScript 模板 
及 Web 开发 框架 ,及 数据 库 , 不 需要 其 他 计算 机 语言 编写 服务 器 端 脚本 ,来 完成 一 个 Web 
应 用 的 开发 ,如 图 25-1 所 示 。 


Presentation Layer 


HTML+CSS+JS + 视图 模板 





BusinessLogicLayer 


Nodejs( 服 务 器 端 JavaScript) 





Data Modeling Layer 
数据 服务 (CRUD) +MySQL/MongoDB 


图 25-1 全 栈 Web 开发 的 MVC 架构 


从 全 栈 Web 开发 MVC 构架 看 ,展示 层 由 视图 模板 引擎 构成 ,开发 语言 是 HTML 十 
CSS 十 JS, 修 辑 业 务 层 后 端 由 Node.js 完成 ,数据 模型 层 由 Node. js 提供 数据 库 接口 ,完成 数 
据 的 处 理 。 


25.3 Node.js 


Node. js 是 基于 Chrome V8 开源 JavaScript 解释 器 ,从 Chrome 浏览 器 分 离 出 来 的 一 
个 实时 JavaScript 运行 环境 ,是 一 个 轻 量 级 的 高 效率 的 JavaScript 运行 平台 。Node. js 使 用 
事件 驱动 . 非 阻 塞 式 1/O 的 模型 。 

Node. js 支持 的 系统 包括 Linux、Windows、Mac OS X, 支 持 JavaScript 代码 在 服务 器 
端 通过 Node. js 来 解释 执行 。 

Node.js 主要 应 用 于 以 下 两 个 方面 。 
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(1) 一 个 是 用 于 编写 Web 开发 的 工具 模块 ,例如 ,Bower、Gulp、Yeoman 等 。 

(2) 基于 JavaScript 脚本 语言 的 服务 器 端 开 发 , Node. js 提供 了 丰富 的 API 来 完成 
Web 服务 器 端的 开发 ,实现 服务 器 端 逻 辑 业 务 层 和 数据 库 的 访问 服务 。 

Node. js 是 模块 化 的 管理 构架 ,通过 NPM 包 管 理工 具 来 加 载 管 理 模块 。 





25.3.1 Node.js 语法 规范 


Node. js 是 用 JavaScript 在 服务 器 端 编写 的 脚本 语言 ,其 运行 环境 是 V8 引擎 ,与 浏览 
器 端的 JavaScript 引擎 有 些 区 别 , 例 如 ,浏览 器 端的 window 全 局 对 象 , 在 服务 器 端 就 用 不 
上 ,可 以 说 ,Node.js 6.0 版 以 后 基本 支持 90% 以 上 的 ES2015(JavaScript 传统 的 JavaScript 
版 本 ) ,最 新 版 本 的 Node. js 也 开始 逐步 支持 ES2016、ES2017 的 JavaScript 版 本 。 根 据 服 
务 器 端的 运行 环境 ,Node. js 添加 了 一 些 全 局 对 象 global、console 和 process。 

(1) global 对 象 是 让 定义 在 其 里 面 的 属性 全 局 可 见 , 并 且 可 以 忽略 global 的 对 象 名 称 ， 
而 直接 引用 ,代码 如 下 。 




















global. user = "Joe Zhou"; 
global. password = "12345"; 
console. log(user + "/" + password); 











(2) console 是 控制 台 全 局 对 象 ,最 常用 的 是 console. log() ,在 控制 台 输 出 信息 , 见 上 面 
的 代码 。 

(3) process 是 关于 Node. js 进程 管理 的 一 个 全 局 对 象 , 当 执 行 “node xxx. js” 命 令 时 ， 
相当 于 启动 了 一 个 Node 进程 来 运行 xxx.js 代码 ,同时 ,process 全 局 对 象 也 创建 了 。 





‘console. log(process. env); // 用 JSON 格式 打印 系统 环境 变量 
console. log(process. argv); // 显 示 当 前 进程 命令 , 当然 是 node. exe 











25.3.2 Node.js 构建 简单 的 web 服务 器 


通过 Node.js, 从 HTTP 底层 编写 服务 器 端 代码 ,来 创建 一 个 独立 的 Web 服务 器 ,完成 
一 个 Web 服务 器 处 理 请 求 (request) 和 响应 (response) 功 能 。 所 以 ,基于 Node.js 的 Web 服 
务 器 ,完全 不 需要 像 Apache Web 等 其 他 服务 器 的 支持 ,而 且 , 其 编程 非常 简单 。 例 如 ,下 面 
是 一 个 用 Node.js 开发 的 最 简单 的 Web 服务 器 。 见 例子 25-1 。 





var http = require("http"); 
function http_Server(req, res){ 
Var content = "connection to server!"; 
content_Len = content. length; 
res. writeHead(200, {'content_Length':content_Len, 
'content_TYpe': 'text/plain'}); 


res. end( content); et 


例子 25-1: 
part4/ch25/httpserver. js 


} 
http. createServer(http_Server). listen(8000); 
console. log("Server is starting at port:8000"); 
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以 上 代码 是 通过 require("http") 获 取 一 个 http 模块 对 象 ,创建 一 个 http_Server() 函数 
来 响应 浏览 器 的 请 求 ,通过 res. writeHead() 函数 构造 一 个 http 响应 头 , 响 应 码 是 200 ,定义 
响应 包 内 容 长 度 和 内 容 类 型 是 普通 文本 。 通 过 http 对 象 创建 一 个 Web 服务 器 ,并 监听 
8000 端口 。 


25.3.3 ”Node.js 的 非 阻 塞 /oO ,异步 编程 和 事件 驱动 


阻塞 I/O 是 耗 时 比较 长 的 数据 输入 输出 操作 ,例如 , 读 取 文件 .访问 数据 库 、 访 问 网 络 
数据 .复杂 计算 等 ,如 果 采 用 同步 编程 ,每 一 个 IVO 操作 都 要 等 待 上 一 个 IVO 操作 结束 ,才能 
继续 执行 ,这 种 方式 的 编程 已 经 无 法 满足 现代 网 络 应 用 的 基本 响应 要 求 。 那 么 ,异步 编程 思想 
是 通过 多 任务 操作 系统 的 进程 或 线程 来 解决 阻塞 I/O 时 的 等 待 问题 , 例 如 ,Java、C++ 的 线 
程 技术 ,通过 把 一 些 比 较 耗 时 的 阻塞 I/O 计算 交 给 一 个 线程 去 做 , 主 控 程 序 可 以 接着 继续 
执行 其 他 任务 ,一 旦 线程 完成 计算 ,其 结果 将 通过 中 断 返 回 给 主 控 程序 ,这 就 是 现代 操作 系 
统 的 多 任务 并 行 处 理 阻 塞 IO 的 思路 。 

但 是 JavaScript 早期 是 没有 线程 机 制 的 ,其 实现 异步 编程 的 思想 不 同 ,其 原理 是 在 被 执 
行 的 函数 定义 的 参数 里 面包 含 一 个 该 函数 执行 完 后 要 执行 的 回调 函数 ,传统 的 计算 机 语言 
中 ,例如 C 语 言 ,其 函数 定义 的 参数 是 普通 数据 类 型 ,例如 字符 串 、 整 数 等 ,而 JavaScript 的 
函数 可 以 看 成 一 个 对 象 ,是 一 种 特殊 数据 类 型 ,可 以 作为 另 一 个 函数 的 参数 。 例 如 ,定时 器 
函数 就 是 用 了 这 种 异步 编程 的 思想 ,setTimeout(callback,time) 里 面 有 两 个 参数 ,一 个 是 定 
时 时 间 time, 一 个 是 定时 时 间 到 后 要 执行 的 回调 函数 callback() 。 当 JavaScript 引擎 执行 到 
setTimeout() 函 数 时 , 它 会 把 callback( 〇 函数 放 到 事件 队列 中 ,继续 执行 下 面 的 代码 ,直到 定 
时 事件 发 生 , 才 从 事件 队列 中 取出 callback() 函 数 执行 。 异 步 编 程 的 好 处 是 不 用 等 待 某 一 
个 代码 执行 结果 ,效率 明显 提高 。 但 是 ,异步 编程 如 果 控 制 不 好 也 容易 出 问题 ,例如 ,文件 的 
打开 和 读 写 。 读 写 必须 是 文件 打开 完成 后 执行 ,Node. js 也 提供 同步 API 处 理 同步 编程 问 
题 , 例 如 ,fs. openSync() 同 步 打开 一 个 文件 ,fs. readSync() 是 同步 读 取 文件 内 容 , 文 件 内 容 
没有 读 取 完成 不 会 执行 后 面 的 代码 。 

Node.js 作为 Web 服务 器 端的 程序 ,需要 大 量 处 理 各 种 Web 的 请 求 和 快速 的 响应 , 同 
时 ,还 要 在 服务 器 端 访 问 各 种 文件 ,数据库 资源 ,而 传统 Web 服务 器 端的 多 线程 编程 方法 会 
消耗 大 量 的 内 存 和 CPU 资源 ,积累 的 结果 是 阻塞 进程 返回 结果 的 时 间 加 大 ,因而 造成 系统 
没有 更 多 资源 来 处 理 Web 请 求 。 所 以 ,Node. js 的 核心 技术 没有 采用 大 量 的 多 线程 技术 ， 
而 是 用 回调 函数 的 事件 栈 解决 阻塞 IO 的 等 待 问题 。 所 以 ,Node.js 采用 单线 程 方式 ,通过 事件 
轮 询 来 处 理 外 部 回调 函数 和 服务 ,是 一 种 事件 监听 、 驱 动 的 编程 方式 ,占用 系统 资源 最 小 。 

但 是 ,由 于 Node.js 是 单线 程 运行 模式 ,不 适合 应 用 在 耗 时 复杂 的 数学 计算 系统 。 通 过 
非 阻 塞 IO 和 异步 编程 技术 ,更 适合 大 量 Web 访问 应 用 服务 和 频繁 I/O 访问 的 系统 。 

和 浏览 器 端 JavaScript 事件 比较 ,Node.js 服务 器 端的 事件 没有 像 浏 览 器 端 鼠 标 单 击 事 
件 onclick 那么 直观 ,基本 是 隐藏 的 事件 。Node. js 通过 核心 模块 events 来 给 一 个 对 象 自 定 
义 事件 、 绑 定 事件 和 触发 事件 ,例如 ,http 请 求 就 是 一 个 隐藏 事件 。 在 例子 25-1 的 代码 中 ， 
http 的 事件 回调 函数 是 http_server() ,这 个 事件 处 理 函数 http. createServer() 执 行 完 以 后 ， 
返回 request 和 response 对 象 ,并 成 为 回调 函数 http_server() 的 参数 ,来 完成 http 的 请 求 
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和 响应 。 这 里 有 一 个 困扰 的 问题 是 req 和 res 参数 是 封装 在 http 对 象 里 面 ,而 外 部 函数 
http_server(req,res) 直 接 使 用 ,似乎 违反 了 变量 的 作用 域 。 要 深入 理解 这 个 问题 ,需要 了 
解 JavaScript 函数 的 闭 包 。 


25.3.4 JavaScript 函数 的 闭 包 与 自我 调用 


JavaScript 的 变量 的 作用 域 可 以 是 全 局 或 局 部 的 ,定义 在 所 有 函数 最 顶层 的 变量 是 全 
局 变量 ,或 者 在 函数 内 部 定义 的 变量 都 是 局 部 变量 ,如 果 省 略 var 也 是 全 局 变量 ,而 函数 是 
可 以 幅 套 的 , 子 函数 可 以 访问 上 一 层 父 函数 的 变量 。 如 下 代码 定义 了 一 个 全 局 变量 a 和 局 
部 变量 b 和 c, 分 别 分 布 在 父 函 数 count() 和 子 函 数 add() 里 面 , 子 函数 add 可 以 访问 a,b,c 
所 有 变量 ,而 count 不 能 访问 c 变量 。 





vara=0; 
function count(){ 
var b= 0; 
function add() 
{var c=0; 
b=b+l;a=at+l;c=c+1;} 
add(); 
4 











上 面 的 代码 中 有 一 个 数据 安全 问题 ,全 局 变量 a 除了 可 以 通过 add() 计 算 外 ,其 他 函数 
也 可 以 任意 去 修改 a 的 值 ,所 以 ,编程 方法 中 应 尽量 少 用 全 局 变量 。 一 般 面 向 对 象 编程 方法 
是 把 数据 封装 到 类 里 面 ,用 getter, setter 方法 访问 局 部 变量 。 而 JavaScript 早期 编程 风格 
是 函数 式 , 现 在 逐渐 过 渡 到 面向 对 象 ,函数 式 编程 只 能 用 return 返回 内 部 变量 值 ,但 是 要 返 
回 多 个 内 部 变量 就 比较 复杂 。 解 决 方法 是 直接 返回 一 个 子 函数 ,再 看 看 下 面 的 代码 : 





var count = ( function () { 
vara= 0; 
return function () { 
var b=0; 
b+=1; 
a+= 1; 


1)0; 











函数 count 定义 成 里 面 谋 套 两 个 匿名 函数 , 父 匿 名 函数 定义 一 个 局 部 变量 a, 及 子 匿 名 
函数 ,用 来 执行 内 部 计算 ,并 被 return 返回 给 count 函数 对 象 。count 函数 是 定义 成 自我 调 
用 方式 : count 二 (function(){))(), 这 种 方式 相当 于 面向 对 象 的 构造 函数 ,其 原理 是 在 
count 定义 好 后 ,自动 执行 一 次 ,初始 化 并 创建 一 个 实例 对 象 count, 而 且 这 个 count 对 象 被 
初始 化 成 返回 的 作为 计算 的 子 匿 名 函数 ,同时 ,初始 化 后 , 父 匿名 函数 的 局 部 变量 a 永远 驻 
留 在 内 存 , 只 要 count 对 象 不 被 销毁 。 这 就 是 JavaScript 的 闭 包 结构 , 它 使 得 函数 可 以 拥有 
私有 变量 a, 再 让 一 个 新 创建 的 函数 实例 对 象 count 去 访问 a。 这 也 是 用 来 解决 Node. js 的 
事件 驱动 和 异步 编程 结构 中 ,让 其 他 函数 可 以 变相 地 访问 局 部 变量 的 问题 。 
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例子 25-2 中 ,在 上 面 代码 加 入 以 下 代码 来 显示 a,b 变量 值 ,可 以 看 到 ,每 次 执行 count()， 
其 实 是 在 执行 作为 计算 的 子 匿名 函数 。 





var count = (function () { 


vara= 0; 
return function () { 
var b= 0; 
b+=1; es 
Dube 
例子 25-2: 


document. getElementByld("a"). innerHTML = a; 
document. getElementByld("b"). innerHTML = b; 
}1)0); 


part4/ch25/clousure/ 
clousure2. html 











25.3.5 构造 一 个 静态 资源 的 Web 服务 器 

通过 Node. js 的 核心 模块 http 和 fs 模块 ,基本 可 以 构建 ER 
一 个 完整 的 Web 服务 器 ,例子 25-1 中 的 代码 仅仅 是 响应 ”例子 25-3: 
http 请 求 ,返回 一 个 字符 串 ,而 不 是 一 个 完整 的 HTML 网 页 part4/ch25/webserver. js 
文件 ,下 面 的 代码 是 通过 加 载 文件 模块 fs, 完 成 Web 服务 器 
返回 一 个 HTML 页 面 。 见 例子 25-3。 





var http = require("http"); 
var fs = require("fs"); 
function http_Server(req, res){ 
fs. readFile( 'www/index. html', get_File); 
function get File(err, data){ 
if(err){ 
res. writeHead( 500, { 'content_Type': 'text/plain'}); 
res. end( '500 — internal Error! ');} 
else{ 
res. writeHead(200, { 'content_ Type': 'text/html'}); 
res. end(data);}; }; 
}; 
http. createServer(http_Server). listen(8000); 
console. log("Server is starting at port:8000"); 











首先 ,在 www 目录 项 目 中 创建 一 个 index. html 静态 网 页 文件 ,修改 例子 25-1 的 代码 ， 
添加 文件 处 理 模块 fs, 通 过 fs. readFile() 读 取 www/index. html 文件 ,这 里 是 异步 编程 方 
式 , 读 文件 完成 产生 一 个 事件 ,并 返回 两 个 结果 :“err” 读 文件 错误 信息 和 “data” 读 取 的 文件 
内 容 。 然 后 ,执行 回调 函数 get_File(err,data) 处 理 和 发 送 http 的 响应 包 。 如 果 找 不 到 资源 
文件 index. html, 向 浏览 器 发 送 状 态 码 500, 显 示 “500-internal error!1” 错 误 信息 ,否则 ,将 获 
取 的 index. html 文件 内 容 及 200 状态 码 发 送 给 浏览 器 。 


25.3.6 ”Node.js 路 由 功能 
路 由 就 是 服务 器 端 解析 用 户 端 发 出 的 http 请 求 , 来 分 配给 相应 的 处 理 功能 ,有 点 像 
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Java Web 应 用 开发 框架 Struts 2 的 过 滤器 功能 。 具 体 来 说 是 浏览 器 端 通过 URL 向 服务 器 
发 出 资源 请 求 ,服务 器 解析 URL 地 址 ,来 决定 提供 哪些 相应 服务 。 

下 面 通过 例子 25-4 来 分 析 node. js 的 路 由 功能 实现 。 首 
先 ,在 服务 器 端的 www 目录 下 面 添加 资源 home. html、 例子 25-4: 
about. html 和 qq_logo. png, 然 后 ,通过 浏览 器 的 URL 来 访 Part4/ch25/webserverl.js 
问 这 些 资源 。 服 务 器 端 代码 如 下 。 











function http_Server(req, res){ 
var getUrl = req. url; 
var path = url. parse(getUr]1). path; 
switch (path) { 
case '/www/home. html': 
serveFiles(res, 'www/home. html', 'text/html') ;break; 
case '/imgs/qq_logo. png': 
serveFiles(res, 'imgs/qq_1ogo. png', 'text/png') ;break; 
case '/www/about, html': 
serveFiles(res, 'www/about. html', 'text/html') ;break; 
default: 
serveFiles(res, 'www/404. html', 'text/htm]') ;break; } }; 











首先 ,代码 req. url 获取 URL 地 址 ,并 通过 URL 模块 解析 出 资源 的 相对 路 径 path ,再 
通过 serveFiles() 返 回 浏览 器 请 求 的 资源 文件 。 


25.3.7 ”Node.js 的 模块 化 编程 


Node. js 采用 一 种 模块 化 的 编程 方式 ,是 按照 CommonJS 规范 实现 的 。 我们 知道 ， 
JavaScript 语言 原 有 的 官方 API 仅 适用 于 浏览 器 端 应 用 ,CommonJS 规范 的 提出 是 为 了 改 
变 这 个 现状 ,让 JavaScript 像 一 个 普通 计算 机 语言 ,例如 ,Python Java 等 一 样 有 一 个 通用 的 
标准 开发 库 , 来 开发 非 浏览 器 端的 应 用 软件 。 

Node.js 的 一 个 模块 就 是 一 个 独立 文件 ,拥有 单独 的 作用 域 , 模 块 结构 由 以 下 三 个 部 分 
组 成 。 

(1) require 模块 引用 和 加 载 , 相 当 于 对 象 实例 化 工厂 ,创建 一 个 实例 化 模块 对 象 。 

(2) exports 模块 定义 ,用 于 封装 对 象 .方法 与 属性 到 模块 对 象 里 面 。 

(3) module 模块 对 象 标识 ,模块 的 容器 ,系统 默认 exports 一 model. exports。 

Node.js 本 身 自 带 几 个 核心 模块 ,大 量 的 功能 实现 靠 第 三 方 模块 ,用 户 也 可 以 编写 自己 
的 模块 和 发 布 自己 的 模块 。 核 心 模块 已 经 编译 成 二 进 制 文件 打包 进 Node.js 的 安装 文件 里 
面 , 第 三 方 模块 可 以 发 布 上 载 到 开源 代码 管理 库 github. com, 然 后 在 npmjs. org 中 注册 这 
个 模块 ,这 样 ,这 个 模块 就 可 以 用 npm 包 管理 命令 ,来 发 布 .安装 、 更 新 一 个 模块 。 

Node. js 的 主要 核心 模块 如 下 。 

(1) http: 构建 一 个 Web 服务 器 的 接口 ,提供 处 理 Web 的 HTTP 请 求 及 响应 的 方法 。 
例如 ,http. createServer() 创 建新 的 Web 服务 器 ,http. listen() 监 听 指 定 的 端口 ,响应 连接 。 

(2) util: 提供 常用 的 工具 。 例 如 ,util. inspect() 返 回 一 个 对 象 的 字符 串 表示 值 。 

(3) querystring: 查询 字符 串 的 接口 。 例 如 ,querystring. stringify() 把 一 个 对 象 序 列 化 
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成 字符 串 ,querystring. parse() 把 字符 串 转 换 成 对 象 表示 。 

(4) url: 解析 和 处 理 URL。 通 过 url. parse(), 把 URL 解析 成 对 象 , 通 过 对 象 获 取 
URL 的 信息 。 

(5) fs: 通过 文件 操作 接口 。 例 如 ,fs. readerFile() 读 取 一 个 文件 ,fs. writeFile() 将 数据 
写 人 文件 。 

不 管 是 Node. js 的 核心 模块 还 是 第 三 方 模块 ,都 使 用 函数 require( ) 加 载 模块 ,相当 于 
Java 的 import 指令 。 由 于 Node.js 是 一 个 开源 的 系统 ,形成 一 个 基于 Node. js 的 开发 生态 
圈 , 有 许多 优秀 的 Node. js 的 第 三 方 开源 开发 框架 ,例如 ,Express 一 个 流行 的 Web 框架 和 
Derby 一 个 基于 MVC 的 框架 。 

Node. js 自 定义 模块 也 叫 包 , 通 过 以 下 几 个 步骤 来 创建 。 

(1) 创建 一 个 目录 来 存放 自 定义 模块 ,目录 名 就 是 模块 名 ,这 里 是 calculator。 

(2) 创建 一 个 calcu. js 来 封装 模块 的 代码 。 

(3) 创建 一 个 package. json 包 文 件 来 定义 模块 的 参数 。 

(4) 创建 一 个 readme. md 文件 来 描述 模块 ,相当 于 模块 的 说 明 书 。 

(5) 在 模块 目录 名 下 ,执行 npm pack 给 模块 压缩 打包 成 . tgz 的 文件 格式 。 

(6) 安装 模块 到 Node.js 的 开发 环境 。 

例子 25-5 是 一 个 简单 计算 器 的 模块 化 calculator 的 代 
码 , 在 calculator 目录 下 面 创建 calcu. js 文件 .分别 包含 加 减 ” 例子 25-5: 
乘除 4 个 函数 ,并 把 它们 作为 一 个 对 象 属性 添加 到 全 局 对 象 Part4/ch25/model.js 
exports 里 面 。 











function add(x,Y){return x+ y;} 
function minus(x, y) {return x— y;} 
function multiple(x, y) {return xx y;} 
function divide(x, y) {return x/y;} 
exports. add = add; 

exports. minus = minus; 

exports. multiple = multiple; 





在 calculator 目录 下 面 ,创建 package. json 文件 ,内 容 如 下 。 





{"author" :"Joe Zhou"， 

"name" :"calculator", 

t 

"description" :"this is a simple calculator", 
"main":"calcu. js", 

"reposition":{}, 

"keywords" :[ ], 

"dependencies" :{}, 

"engines":{"node":" x "} 

} 














这 个 JSON 文件 包含 一 些 属性 来 描述 模块 ,author 表示 作者 ,name 表示 模块 名 称 ， 
version 表示 版 本 ,description 表示 模块 的 说 明 ,main 表示 模块 的 主 程序 ,reposition 表示 模 
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块 发 布 到 互联 网 的 软件 仓库 上 的 URL 地 址 ,keywords 表示 模块 的 关键 词 ,用 于 NPM 搜索 
模块 ,dependencies 表示 模块 依赖 的 第 三 方 模块 ,engines 表示 模块 的 引擎 是 Node. js,， “x*” 
表示 适用 于 所 有 Node.js 版 本 。 

在 calculator 目录 下 ,打开 命令 行 窗口 ,执行 打包 命令 : 





npm pack 





打包 成 功 的 话 , 会 在 calculator 目录 下 生成 calculator-0. 1. 1. tgz 文件 。 











npm install calculator\calculator -0.1.1. tgz 





执行 安装 命令 ,将 构建 好 的 模块 安装 到 Node. js 开发 环境 。 

默认 Windows 操作 系统 环境 下 ,用 户 安 装 的 模块 会 在 c:\users\Joe Zhou 系统 登录 的 
用 户 名 (Joe Zhou) 下 创建 node_modules 目录 ,来 存放 安装 到 开发 环境 的 用 户 模块 。 

创建 一 个 model. js 来 测试 用 户 自 定义 模块 ,用 require() 加 载 模块 ,require() 模 块 加 载 
有 两 种 方式 ,直接 通过 模块 名 “calculator”" 加 载 , 前 提 是 该 模块 已 经 通过 “npm install” 命 令 安 
装 到 Node. js 开发 环境 node_modules 目录 下 ,或 者 通过 直接 加 载 模块 主 控 程序 ,本 例 中 是 
“calculator/calcu. js”, 代 码 如 下 。 





//var calcu = require("calculator"); 

var calcu = require("calculator/calcu. js"); 

Var x=1,y=2; 

console. log(x+'+'+y+'='+calcu.add(x, y)); 











Node. js 的 模块 化 编程 中 ,模块 可 以 是 一 个 中 间 件 ,也 可 以 是 一 个 Web 应 用 程序 ; 一 种 
用 模块 方式 管理 的 软件 项 目 开 发 ,通过 “npm init” 命 令 , 引 导 填 写 项 目的 名 称 、 作 者 、 版 本 、 
软件 仓库 URL 地 址 、 关 键 字 等 项 目 信 息 , 并 自动 创建 package. json 文件 作为 项 目 管理 的 参 
数 文件 。 如 果 在 加 载 项 目 时 需要 第 三 方 模块 ,使 用 命令 “npm install < 模块 名 > --save”, 其 
中 ,“--save” 选 项 会 自动 在 开发 项 目 包 package. json 文件 里 面 添加 相应 的 依赖 模块 ,让 项 目 
开发 管理 更 简单 。 


25.4 Web 框架 Express 


前 面 用 Node.js 的 自 带 核心 模块 构建 了 一 个 简单 的 Web 服务 器 来 处 理 HTTP 的 请 求 
和 响应 ,而 作为 Web 服务 器 ,常常 有 一 些 通 用 的 功能 ,例如 ,HTTP 请 求 的 get、post、put、 
delete 等 的 处 理 方法 ,响应 包头 的 打包 等 功能 。 在 NPM 生态 圈 里 ,有 大 量 的 第 三 方 模块 来 
完成 这 些 Web 服务 器 功能 ,而 Express 模块 是 最 流行 的 构建 Web 服务 器 的 应 用 框架 。 
Express 通过 扩展 HTTP 核心 模块 ,提供 强大 的 Web 路 由 ， 
构造 RESTful JSON 服务 ,处 理 Session 和 Cookie 功能 。 例子 25-6: 

例子 25-6 是 通过 Express 模块 创建 的 Web 服务 器 ,并 Part4/ch25/ webexpress. js 
处 理 get 的 请 求 方法 。 代 码 如 下 。 
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Var express = require( "express"); 
var app = express(); 
app. listen(8000); 
console. log("Express Web server is starting at port:8000"); 
app. get('/', function(req, res) 
{res. send( 'Hello!, this is from express Web Server. ');}); 











25.4.1 Express 的 路 由 

Express 把 Web 路 由 定义 分 成 两 部 分 ,一 个 是 HTTP 请 求 的 方法 method, 例 如 get、 
post、put、delete 等 ; 第 二 部 分 是 URL 的 路 径 path。 所 以 ,Express 实现 路 由 的 语法 格式 
如 下 : 





app. < method >(path, [middleware, … ], callback(req, res)); 











其 中 ,< method > 是 HTTP 的 方法 名 称 , 相 当 于 HTTP 请 求 的 事件 处 理 函 数 ; path 是 
从 URL 解析 出 来 的 路 径 部 分 ; Express 有 加 载 中 间 件 middleware 函数 的 功能 ; callback() 
是 当 HTTP 请 求 方法 method 和 path 匹配 时 的 回调 函数 ,处 
理 HTTP 的 请 求 req 和 响应 res 对 象 。 同 时 ,Express 提供 。” 例子 25-7: 
了 app.all() 来 处 理 所 有 HTTP 请 求 , 用 app. use() 处 理 不 区 。 Part4/ch25/expressroute.js 
配 的 路 由 , 见 例子 25-7, 请 看 下 面 路 由 部 分 代码 。 





//Route start from here 
app. get('/', function(req, res) 
{res. send( 'Hello!, this is from get().');}); 
app. get( '/home', function(req, res) 
{res. sendFile( 'www/expresshome. html', {root: dirname}, 
function(err){if (err) {console. log( 'err');} 
else{console. log( 'success');}});}); 
app. post( '/login', bodyParser. urlencoded( { extended: false }), 
function(req, res){res. send( 'Hello! this is from post(). userid:'+ 
req. query. id + 'username:' + req.body.username + ':password:' 
+ req. body. password) ; }); 
app. use( '/json', bodyParser. urlencoded( { extended: false }), function(req, res) 
{req. body. id = req. query. jd; 
app. set( 'json spaces', 4); 
res. json(req. body);}); }); 
app.all('* ',function(req, res) 
{res. send( 'Hello!, this is from all().');}); 











虽然 路 由 是 事件 驱动 的 ,但 是 代码 的 顺序 会 产生 不 同 的 路 由 结果 ,如 果 把 上 面 代 码 中 的 
app. all() 放 到 路 由 代码 的 最 前 面 ,这 样 所 有 的 请 求 都 会 路 由 到 all() ,而 不 会 执行 其 他 的 路 
由 。 也 就 是 说 ,Express 路 由 是 按 代码 顺序 来 放 入 事件 栈 的 。 接 收 浏览 器 请 求 的 处 理 主要 是 
提取 参数 ,参数 传递 是 通过 URL 方式 ,例如 ,URL 是 “http://localhost:8000/json?id 二 1”， 
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用 req. query. id 提取 值 是 *1”。post 方式 的 HTTP 请 求 ,参数 包含 在 内 容 里 面 ,提取 参数 用 
到 中 间 件 body-parser 模块 来 解析 参数 到 req. body 对 象 里 面 。 处 理 路 由 的 响应 有 res. send() 
发 送 文本 ,res. sendFile() 发 送 静 态 文件 ,res. json() 以 JSON 格式 发 送 数据 。 


25.4.2 ”Express 的 中 间 件 


Express 提供 一 种 中 间 件 的 框架 ,中 间 件 是 协助 Express 处 理 HTTP 请 求 的 第 三 方 模 
块 ,路 由 处 理 程序 都 会 插入 一 些 中 间 件 来 完成 某 一 功能 。 在 Express 4.0 以 后 , 除 static 静 
态 文件 处 理 和 HTTP 的 get 方法 的 URL 参数 解析 中 间 件 query 以 外 ,其 他 中 间 件 需要 通 
过 命令 npm install 单独 安装 并 在 代码 中 用 require() 加 载 。 

在 例子 25-5 中 ,app. use('/imgs',express. static("imgs")) 是 利用 静态 文件 中 间 件 的 一 
个 例子 ,表示 在 imgs 目录 下 的 文件 请 求 , 不 需要 调用 res. sendFile() ,直接 返回 响应 的 文件 。 
还 有 中 间 件 body-parser, 其 中 ,bodyParser. urlencoded({ extended: false } 用 来 解析 HTTP 的 
post 方 法 传递 的 内 容 到 req. body 对 象 。 中 间 件 query 协助 完成 对 URL 地 址 */login?id 一 1 的 
解析 ,可 以 从 req. query. id 获取 传递 的 id 参数 值 。 中 间 件 函数 除了 可 以 通过 app. use() 全 
局 调用 外 ,还 可 以 在 app.< method >() 某 一 个 路 由 函数 中 ,作为 参数 局 部 调用 。 


25.4.3 Express 的 模板 引擎 


在 前 面 的 例子 中 ,Express 服务 器 处 理 HTTP 的 请 求 ,然后 返回 给 浏览 器 的 数据 可 以 
是 文本 、 静 态 文件 或 JSON 格式 的 字符 串 。 其 实 , 在 浏览 器 端 显示 的 数据 可 以 分 成 两 种 ,一 
种 是 固定 的 内 容 , 或 者 称 之 为 静态 内 容 , 另 外 一 种 是 可 以 动态 刷新 的 内 容 。 那 么 ,静态 内 容 
可 以 是 用 HTML 十 CSS 构建 一 个 静态 的 文件 ,也 可 以 称 之 为 模板 文件 ,浏览 器 只 加 载 一 次 
模板 文件 ,以 后 的 请 求 都 是 从 服务 器 获取 动态 数据 ,在 模板 文件 的 指定 位 置 刷新 。Express 
提供 了 不 同 的 模板 引擎 ,模板 引擎 的 任务 是 配置 模板 文件 ,完成 动态 数据 在 模板 页 面 的 
泻 染 。 

这 里 选择 一 个 和 JSP 标签 库 类 似 的 支持 Express 的 模板 引擎 EJS。 首 先 ,创建 views 
目录 用 来 存放 EJS 的 模板 文件 ,并 创建 一 个 HTML 的 模板 文件 temp. ejs, 其 中 在 显示 数据 
的 地 方 使 用 特别 的 标签 <% 二 variable %>,variable 就 是 从 服务 器 端 传 过 来 的 JavaScript 变 
量 。 在 项 目 目录 下 创建 应 用 elstemp.js, 代 码 如 下 。 

















var express = require( 'express'); 
var app = express(); 
var ejs = require("ejs") 
app. listen(8000); 
console. 1og("Express server is starting at:8000"); 
app. set('views', '. /views'); 
app. set( 'view engine', 'ejs'); 
app. get('/', function(req res){ 
res. render( 'temp. ejs', {'username': 'Joe Zhou', 'password':'12345'}); }); 
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具体 见 例子 25-8。 首 先 , 通 过 npm 安装 EJS 模板 ,通过 
app.set() 配 置 模板 引擎 ,例如 ,指定 模板 文件 的 目录 是 ”例子 25-8: 
“. /views” ,指定 模板 引擎 是 EJS。 通 过 res. render() 在 指定 Part4/ch25/ejstemp.js 
的 模板 文件 temp. ejs 传送 JSON 格式 的 数据 。 在 服务 器 端 
启动 服务 node ejstemp.js, 浏 览 器 端 访问 http://localhost:8000, 可 以 看 到 数据 值 泻 染 到 页 
面 上 。 





25.5 AngularJS 框架 


AngularJS 是 基于 HTML 5 十 JavaScript 的 客户 端 框 架 ,通过 请 求 后 端的 RESTful 
(Representational State Transfer) 服 务 快速 开发 移动 或 桌面 Web 应 用 。 

AngularJS 框架 采用 的 是 强制 性 的 MVC 架构 ,但 是 和 传统 的 MVC 架构 不 同 的 是 , 控 
制 层 、 数 据 层 和 显示 层 都 放 到 了 客户 端 完 成 ,如 图 25-2 所 示 , 其 优势 显而易见 ,充分 利用 移 
动 设备 强大 的 硬件 功能 ,减轻 服务 器 端 负 担 , 让 应 用 的 运行 效率 接近 原生 应 用 。 
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FE 
控制 器 RESTful 


图 25-2 AngularJS 的 MVC 架构 








25.5.1 RESTful 架构 

RESTful 的 字面 意思 是 “表现 状态 的 传递 ”, 是 早期 MVC 构架 的 representation 表现 层 
或 view 视图 层 。 在 Web 应 用 中 ,最 重要 的 一 个 环节 是 抓 取 远 程 的 服务 器 端 数 据 在 客户 端 
的 表现 层 泻 染 。 最 早 实 现 这 种 访问 服务 的 是 SOAP(Simple Object Access Protocol) ,是 基 
于 XML 格式 ,建立 在 HTTP 上 的 简易 通信 协议 ,用 来 进行 信息 交换 。 例 如 ,通过 SOAP 服 
务 ,Web 应 用 可 以 获得 天 气 预报 的 数据 信息 。RESTful 服务 有 点 儿 类 似 于 SOAP, 但 是 ， 
RESTful 的 实现 方式 比 SOAP 简单 ,完全 有 替代 SOAP 的 趋势 。 

RESTful 的 核心 思想 是 “State transfer”, 把 HTTP 这 种 没有 状态 的 互联 网 协议 ,通过 
这 些 GET、. POST、.PUT、 DELETE 的 HTTP 方法 和 URL 来 结合 ,作为 一 个 API, 来 改变 互 
联网 资源 的 状态 ,从 而 实现 对 互联 网 资源 的 CURD(create、update、retrieve 和 delete) 操 作 
功能 。REST 采用 JSON 格式 打包 数据 ,简化 了 客户 端 和 服务 器 的 实现 。 


25.5.2 ”AngularJS 的 单 页 应 用 

AngularJS 特别 适合 开发 Web 单 页 应 用 (Single Page Application ,SPA) ,也 就 是 说 一 
个 Web 应 用 仅 有 一 个 index. html 文件 作为 网 页 首页 ,而 没有 其 他 页 面 的 跳 转 。 一 个 应 用 
的 页 面 内 容 可 以 通过 RESTful API 动态 地 添加 、 修 改 和 删除 。AngularJS 默认 采用 
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Hashbang 模式 和 HTML 5 模式 (使 用 HTML 5 的 history APIT) 来 帮助 改变 URL 片段 及 
进行 历史 管理 。 这 两 种 模式 都 是 通过 hash 码 标 识 更 新 的 部 分 数据 ,而 不 是 整个 页 面 更 新 ， 
并 且 相 应 地 改变 地 址 栏 中 的 URL。 这 个 URL 地 址 通常 会 加 *# ”来 表示 更 新 片段 记录 ,用 
户 通过 这 种 方式 ,也 可 以 分 享 这 个 部 分 更 新 内 容 的 URL 地 址 。 


25.5.3 模块 化 编程 和 依赖 注入 


AngularJS 所 有 的 JavaScript 代码 都 是 以 模块 化 出 现 的 ,模块 相当 于 一 个 容器 ,将 所 有 
对 象 纳 入 这 个 容器 来 管理 。AngularJS 提供 了 一 些 基本 模块 ,例如 ,ng 模块 是 核心 模块 , 提 
供 了 构建 HTML 模板 指令 的 支持 ,及 常用 的 一 些 服务 ,例如 $http、$location、$ compile 
等 。 这 个 模块 包含 在 angular. min. js 库 文件 中 , ngRoute 模块 支持 URL 路 由 管理 ,在 
angular-route. min. js 库 文件 中 , Resource 模块 支持 RESTful 服务 的 数据 查询 更改, 在 
angular-resource. min. js 库 文 件 中 .ngCookie 模块 是 用 来 处 理 和 管理 Cookie, 在 angular. 
cookie. min. js 库 文件 中 ,还 有 更 多 的 AngularJS 模块 可 以 到 官网 查看 。 这 些 需 要 用 到 的 模 
块 在 入 口 主 控 index. html 文件 中 的 < head > 标签 下 引用 进来 ,代码 如 下 。 





< script src= "js/libs/angular. min. js"></script > 
< script src= "js/libs/angular - route. min. js"></script > 











AngularJS 的 库 文件 到 官网 下 载 带 “min” 压 缩 版 到 本 地 js\libs 目录 下 或 直接 远程 
引用 。 
用 户 可 以 定义 自己 的 模块 ,在 js 目录 下 ,创建 app. js 主 控 程序 ,定义 一 个 模块 如 下 。 





var helloApp = angular. module( 'helloApp', [ 'ngRoute', ‘helloAppControls']); 











用 module() 函 数 定义 模块 ,有 两 个 参数 ,其 中 一 个 模块 名 是 “helloApp”, 也 是 应 用 名 
ng-app 一 "helloApp" ,定义 在 index. html 文件 中 。 第 二 个 参数 是 数组 ,是 用 来 定义 应 用 依 
赖 的 模块 ,有 ngRoute, 来 自 于 angular-route. min. js 库 , 是 路 由 服务 的 提供 者 ,所 有 来 自 于 
AngularJS 官方 发 布 的 模块 的 服务 提供 者 都 带 有 “$ "前缀 ,表示 是 公有 的 对 象 ,“$ $ ”表示 
私有 的 对 象 。 另 一 个 依赖 模块 是 “helloControllers”, 是 用 户 自 定义 的 模块 ,通过 模块 实例 对 
象 的 配 告 函数 config() ,将 服务 提供 者 的 值 注入 到 模块 容器 ,代码 如 下 。 





helloApp. config ([ ' $ routeProvider ' ，' $ locationProvider ' ， function ( $ routeProvider, 
$ locationProvider) {…]}]) 











把 $routeProvider 路 由 服务 提供 者 的 服务 通过 function ( $routeProvider， 
$ locationProvider) 函数 注入 到 模块 容器 。 也 可 以 把 模块 定义 和 服务 注册 一 气 呵 成 地 完成 ， 
代码 如 下 。 





var helloApp = angular.module( 'helloApp', [ 'ngRoute', 'helloAppControls']) 
.config([' $ routeProvider'，' $ locationProvider', function( $ routeProvider, $ locationProvider) 
{=}]); 
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25.5.4 AngularJS 的 指令 .视图 和 模板 


由 于 AngularJS 是 单 页 应 用 框架 ,index. html 就 是 我 们 的 应 用 的 首页 和 人口 ,模板 是 由 
HTML 的 元 素 构成 的 文件 ,为 AngularJS 应 用 视图 提供 数据 和 UI 的 显示 。AngularJS 通 
过 在 HTML 元 素 中 加 入 指令 属性 来 控制 视图 模板 ,所 有 来 自 AngularJS 的 属性 定义 都 是 
以 “ng? 为 前 缀 命名 的 ,下 面 index. html 代码 中 : 





<! DOCTYPE html > 
< html ng— app = "helloApp"> 
<head> 
<meta charset = "utf — 8"> 
<title> AngularJS APP </title> 
<! 一 angulardS 及 其 他 外 部 JS 库 ,省 略 -一 > 
<! -- 用 户 的 JS 程序 ,省 略 -一 > 
</head > 
<body> 
<div ng- view></div> 
</body> 
</htm]l > 











分 别 定义 了 AngularJS 应 用 名 ng-app="helloApp" 和 模板 局 部 显示 区 域 < div ng-view ></div>。 
接 下 来 ,定义 了 两 个 局 部 模板 ,分 别 是 login. html: 





<div ng— controller = "LoginCtrl"> 
Username: 
< input type = "text" ng 一 model = "user" /> 
Password: 
< input type = "password" ng — model = "password" /> 
<button ng- click = "showMsg( )"> 修 改 </button > 
{{message}} 
</div> 





和 welcome. html, 代 码 如 下 。 





< div ng - controller = "welcomeCtrl">< hl ng - bind = "user"> </hl > 欢迎 光临 ! 你 的 密码 : 
{{password} }</div> 











25.5.5 ”作用 域 . 模 板 和 数据 模型 


AngularJS 数据 模型 是 通过 核心 模块 的 $ scope 作用 域 对 象 来 实现 的 ,所 有 的 动态 数据 
事先 都 存放 在 $ scope 里 面 ,在 视图 模板 中 定义 {{expression)} ,大 括号 里 面 的 expression 
是 由 $scope 属性 组 成 的 表达 式 。$ scope 作用 域 的 值 也 可 以 通过 ng-model 指令 定义 在 表 
单元 素 里 面 ,实现 表单 数据 双向 动态 链接 。 非 表单 元 素 用 ng-bind 指令 定义 $scope 的 值 ， 
如 上 面 的 代码 所 示 。 
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$ scope 的 值 是 通过 模块 的 控制 器 controller() 注 入 到 控制 器 模块 容器 里 ,而 控制 器 又 通过 
ng-controller 指令 绑 定 到 一 个 HTML 元 素 上 ,通常 是 < div ng-controller 一 "LoginCtrl"> </div >， 
所 以 , $ scope 的 值 的 作用 范围 是 有 限 的 ,只 能 在 绑 定 的 < div> 内 有 效 ,如 果 要 把 $ scope 的 值 
传递 到 别 的 控制 器 ,要 把 值 封装 到 全 局 对 象 $ rootScope 中 ,可 以 在 不 同 的 层 < div > 传递 数据 。 





25.5.6 ”Angular 的 路 由 


由 于 AngularJS 是 单 页 应 用 ,并 且 ,MVC 架构 是 在 浏览 器 端 完成 ,所 以 , 它 的 路 由 功能 
也 是 在 浏览 器 端 完成 的 。 页 面 上 部 分 数据 内 容 的 变化 通常 使 用 hash 标记 ,并 通过 监听 
hashchange 事件 来 进行 视图 的 切换 。 另 一 个 方法 是 用 HTML 5 的 history API, 通过 
pushState() 记 录 页 面 变 化 历史 ,监听 popstate 事件 来 进行 视图 的 切换 。 所 有 这 些 都 会 造成 
URL 地 址 的 改变 ,并 记录 下 来 ,通过 AngularJS 浏览 器 端的 路 由 服务 过 滤 URL 的 路 径 ,来 
切换 视图 模板 ,更 新 相应 数据 。 

路 由 功能 是 由 下 routeProvider 服务 提供 ,必须 要 引用 angular-route-min. js 的 库 文件 ， 
在 应 用 中 加 载 ngRoute 模块 。 当 路 径 匹 配 时 ,加 载 视图 模板 和 对 应 的 控制 器 ,在 首页 
index. html 用 ng-view 指令 指定 局 部 模板 数据 刷新 位 置 。 下 面 是 app. js 主 控 程序 的 路 由 
代码 。 





var helloApp = angular.module('helloApp', [ 'ngRoute', 'helloControllers']); 
helloApp. config(['$ routeProvider', '$ locationProvider' 
function( $ routeProvider, $ locationProvider) { 
$ routeProvider. 
when(/', { 
templateUrl: 'partials/login. html', 
controller: 'LoginCtrl' 
}).when('/welcome', { 
templateUrl: 'partials/welcome. html', 
controller: 'WelcomeCtrl' 
1); 
$ locationProvider. html5Mode(false). hashPrefix('! '); 
1); 











当 路 径 是 */” 时 ,加 载 login. html 局 部 模板 到 index. html 的 ng-view 指令 位 置 ,执行 控 
制 器 LoginCtrl 来 完成 数据 的 刷新 。html5Mode(false).hashPrefix('1") 表 示 关 闭 HTML 5 的 
history API 模式 ,采用 hash 模式 加 “1” 前 级 。 所 以 , 当 我 们 输入 标准 URL 地 址 时 ,自动 在 
路 径 前 面 加 上 “#1” 符 号 。 


25.5.7 ”AngularJS 的 控制 器 


控制 器 相当 于 MVC 架构 的 “*C” 业 务 逻 辑 控制 层 ,控制 器 也 是 模块 ,由 模块 的 controller() 
构造 方法 创建 一 个 控制 器 对 象 ,并 通过 依赖 注入 一 些 服 务 提供 者 的 值 。 例 如 , $ scope 作用 
域 提 供 器 的 值 , 控制 器 需要 通过 ng-controller 指令 拥 绑 到 一 个 HTML 元 素 上 , 当 
AngularJS 应 用 在 浏览 器 加 载 编译 时 , 才 创建 控制 器 实例 对 象 , 并 注入 提供 器 的 值 。 如 下 代 
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码 是 声明 一 个 loginCtrl 控制 器 ,并 通过 $ scope 提供 器 注入 了 用 户 名 和 密码 ,及 通过 ng- 
model 指令 将 用 户 名 和 密码 绑 定 到 表单 ,实现 数据 双向 传输 ,并 把 修改 的 数据 封装 到 
$ rootScope 全 局 提供 器 。 





var helloControllers = angular.module( 'helloControllers'，[]); 
helloControllers. controller( 'LoginCtrl', ['$ scope', '$ location'，' $ rootScope' 
function LoginCtr]( $ scope, $ location, $ rootScope) { 
$ scope. user = "Joe"; 
$ scope. password = "12345"; 
$ scope. message = $ scope. user + "请 修改 信息 !"; 
$ scope. changeMsg = function () { 
$ rootScope. user = $ scope. user; 
$ rootScope. password = $ scope. password; 
$ location. path( '/welcome')}; 
}1]); 











同时 ,通过 $1ocation. path('/welcome') ,修改 URL 地 址 ,触发 路 由 导向 welcome. html 
局 部 模板 和 welcomeCtrl 控制 器 。 如 下 是 welcomeCtrl 控制 器 : 





helloControllers. controller('WelcomeCtr1'，[ '$ scope', '$ location', '$ rootScope', 
function WelcomeCtr1( $ scope, $ location, $ rootScope) { 
$ scope. user = $ rootScope. user; 
$ scope. password = $ rootScope. password; 
//$ scope. message = $ scope.user+ "欢迎 光临 ! 你 的 密码 : " + $ scope. password; 
1]); 











将 通过 全 局 提供 器 $ rootScope 传递 过 来 的 用 户 名 密码 
封装 到 $ scope, 将 welcomeCtrl 控制 器 绑 定 到 welcome. html ”例子 25-9: 
局 部 模板 ,并 显示 由 loginCtrl 控制 器 修改 的 用 户 名 密码 。 Part4/eh25/angularjs/ 
AngularJS 的 演示 代码 见 例子 25-9。 iM 


25.6 MongoDB 数据 库 


由 于 AngularJS 的 MVC 开发 框架 是 在 浏览 器 端 完成 ,数据 模型 的 数据 来 源 采用 
RESTful API 的 Web 服务 方式 来 完成 ,RESTful 数据 交互 的 数据 包 采 用 的 是 JSON 格式 ， 
那么 ,如 果 数 据 库 端 是 MySQL 及 其 他 SQL 关系 型 数据 库 , 要 构造 一 个 RESTful 的 服务 ， 
就 比较 复杂 ,因为 传统 数据 库 是 以 表 的 方式 存放 数据 的 。 那 么 , 随 着 RESTful 服务 构架 越 
来 越 普及 ,一 种 基于 非 SQL(NoSQL) 的 数据 库 诞生 了 ,这 些 数据 库 有 Redis、CouchDB 和 
MongoDB 等 。 

MongoDB 简单 地 说 就 是 可 以 直接 存储 数据 对 象 数据 库 , MongoDB 的 数据 结构 又 分 成 
文档 (Document) 和 集合 (Collection) ,文档 是 一 种 JSON 格式 的 数据 对 象 ,集合 是 一 组 相同 
类 型 的 文档 ,对 应 于 传统 关系 型 数据 库 概 念 。MongoDB 的 集合 相当 于 表 的 概念 ,文档 相当 
于 表 里 面 的 记录 。 文档 是 以 BSON 一 一 一 种 JSON 的 轻 量 化 二 进 制 格式 存储 。 
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MongoDB 数据 库 和 其 他 数据 库 系 统一 样 需要 下 载 安装 ,然后 启动 数据 库 服务 。 
MongoDB 和 Node. js 结合 得 很 好 ,MongoDB 数据 库 管 理 控制 台 可 以 直接 执行 JavaScript 
代码 ,并 可 以 存储 JavaScript 的 JSON 对 象 。 

Node.js 有 两 种 方式 连接 MongoDB, 一 个 是 通过 底层 MongoDB 数据 库 驱 动 ,一 个 是 官 
方 支持 的 对 象 文档 映射 模块 Mongoose, 而 Mongoose 模块 更 容易 创建 模型 。 与 MySQL 不 
同 ,MongoDB 可 以 省 略 数据 库 和 集合 的 创建 过 程 ,也 就 是 说 ,代码 直接 使 用 数据 库 和 集合 。 


25.6.1 用 MongoDB 驱动 连接 数据 库 


创建 一 个 项 目 目录 mongodb, 在 目录 下 安装 MongoDB 驱动: 





npm install mongodb 





创建 一 个 mongdb. js 文件 ,连接 数据 库 mydb, 返 回 两 个 参数 err 和 数据 库 对 象 实例 
db, 代 码 如 下 。 





var mongodb = require( 'mongodb').MongoClient; 
var url = 'mongodb://localhost:27017/mydb'; 
mongodb. connect (url, function(err, db) { 
if(!err){ 
console. 1og("Connected successfully to mongodb" ); 
db. close();}}); 











(1) 查询 数据 。 首 先 获 取 数 据 库 集合 users 的 对 象 实例 ,通过 find() 查 询 所 有 文档 ,并 
把 结果 转换 成 数组 。 代 码 如 下 。 





var findDoc = function(db,callback){ 
db. collection( 'users'). find({}). toArray(function(err, data){ 
if(!err) 
console. log("Found:") 
callback(data); 
D2;}; 








(2) 插入 数据 。db. conllection() 获 取 集 合 users 对 象 实例 ,通过 insertmany() 插 人 
myusers 数组 ,里 面包 含 两 个 对 象 。 代 码 如 下 。 





var insertDoc = function(db, callback){ 
db. collection ( 'users ' ) . insertMany (myusers, function| 
(err, result){ 


console. log("Inserted!"); 例子 25-10: 
callback(result); part4/ch25/mongodb/ 
mongodb. js 





Di}; 








具体 例子 见 25-10。 
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25.6.2 用 Mongoose 模块 连接 数据 库 


Mongoose 是 MongoDB 更 高 一 层 的 数据 库 应 用 模块 ,简化 了 从 MongoDB 底层 驱动 写 
代码 的 复杂 性 ,还 可 以 通过 Mongoose, 定 义 数据 模型 (Schema) ,数据 实例 对 象 直接 映射 到 
数据 库 的 文档 ,进行 CRUD 数据 操作 。 具 体 有 三 个 对 象 ,如 下 。 

(1) Schema: 定义 数据 结构 ,相当 于 传统 关系 型 数据 库 的 表 结 构 ,不 直接 操作 数据 库 。 

(2) Model: 将 Schema 发 布 生成 的 Node. js 的 模型 ,拥有 数据 属性 和 对 数据 库 操作 的 


方法 。 
(3) Entity: 由 Model 产生 的 Schema 实体 ,存放 具体 的 数据 ,数据 的 变化 也 会 影响 数 


通过 Schema 封装 到 Module, 从 Model 创建 一 个 Entity 实体 对 象 。 
在 项 目 目录 mongodb 下 ,安装 Mongoose: 





npm install mongoose 





创建 一 个 mydb 数据 库 连接 ,Mongoose 还 通过 数据 库 连 接 的 事件 监听 、 检 查 连接 情况 。 





Var mongoose = require( 'mongoose'); 

mongoose. Promise = global.Promise; 

var url = 'mongodb://localhost:27017/mydb'; 

var db = mongoose. connection; 

db. openUri(url); 

db. on( 'error', console. error. bind(console, 'connected error! ')); 
db. once( 'open', function() {console. log( 'conected! ');}) 











下 面 的 代码 创建 一 个 Schema 并 封装 到 mongoose. module() ,同时 也 封装 成 Node. js 
的 模块 (module. exports)。 模 块 文件 user. js 代码 中 , User 是 一 个 数据 模型 ,相当 于 
MongoDB 里 的 抽象 文档 ,用 JSON 描述 数据 结构 ,MongoDB 提供 了 自己 的 数据 类 型 。 通 过 
mongoose. model() ,把 数据 模型 User 封装 到 数据 库 的 users 集合 ,产生 对 象 与 数据 库 集合 
映射 关系 。 封 装 到 mongoose. model() 的 好 处 是 model 对 象 提 供 了 操作 数据 库 的 CRUD 方 
法 ,例如 : 

(1) 创建 : model. save()。 

(2) 查询 : model. find() ,model. findByld(id) .model. findOne() 。 

(3) 更 新 : model. update() ,model. findByIdAndUpdate(id) ,model. findOneAndUpdate( ) 。 

(4) 删除 : model. remove() ,model. findByIdAndRemove(id) ,model. findOneAndRemove() 。 





Var mongoose = require('mongoose'); 

Var User = new mongoose. Schema({ 
user id: {type: String, index: {unique: true}}, 
username: {type: String}, 
password: {type:String, default:'12345'} 
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D); 
module. exports = mongoose.model('users', User); 











下 面 的 代码 是 引用 user 模型 ,并 通过 new User() 创 建 一 个 实例 对 象 userl ,通过 
userl. save() ,就 可 以 作为 文档 保存 到 数据 库 集合 users。 也 可 以 通过 User. find() 查 询 所 有 
文档 。user 对 象 已 经 与 数据 库 建立 映射 关系 ,通过 封装 在 user 对 象 的 方法 完成 数据 库 的 
CRUD 操作 。 





var User = require(". /module/user. js"); 
var userl = new User({ 
user_id:'004', 
username : 'Jerry li', 
password: 'nooon', }); 
userl. save(function (err, result) { 
if (err) {console. log("Save Error:" + err);} 
else {console. log("Save Result:" + result);} 
]) 


= 
User. find(function (err, result) { 


if (err) {console. log("Find Error:" + err);} a 区 
else {console. log("Find Result:" + result);} Part4/ dc) /mongod! 
D); mongoose. js 











具体 见 例子 25-11。 


25.7 MEAN: 一 个 简单 的 全 栈 Web 应 用 


MEAN ( MongoDB, Express, Angular, Node) 是 一 种 全 栈 JavaScript 开发 架构 ， 
MongoDB、Express 和 Node. js 组 成 服务 器 端 开发 ,AngularJS 实现 浏览 器 端 MVC 架构 
开发 ,构成 一 个 完整 的 B/S Web 应 用 开发 架构 ,而 且 , 服 务 器 和 浏览 器 之 间 , 除 了 静态 
文件 服务 (HTML,CSS,JavaScipt, 图 像 等 文件 ) 传 输 外 ,数据 传输 是 通过 RESTful API 
完成 的 。 


25.7.1 RESTful API 设计 


RESTful API 由 下 面 的 几 个 部 分 组 成 。 

(1) HTTP 请 求 方法 : GET、POST、PUT、DELETE 等 分 别 代表 查询 、 创 建 、 修 改 更 新 、 
删除 数据 的 操作 。 

(2) 域名 (domain) ,服务 器 位 置 ,例如 : http://localhost/。 

(3) URL 路 径 : 域名 服务 器 下 的 资源 位 置 ,例如 ,/user/1, 表 示 请 求 user 的 id 为 1 的 
数据 资源 。 

(4) 媒体 类 型 : JSON ,RESTful API 使 用 JSON 作为 数据 交互 的 格式 。 

将 上 面 的 部 件 设计 成 一 个 RESTful API 来 完成 数据 的 CRUD 操作 ,如 表 25-1 所 示 。 
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表 25-1 RESTful API 与 数据 操作 CRUD 的 关系 























HTTP 方法 /URL 路 径 数据 操作 结果 在 浏览 器 端 操 作 函 数 
GET(/user/joe) (查询 ) 查询 用 户 名 为 joe 的 用 户 Login() 
POST(/user) (创建 ) 创建 一 个 用 户 Register() 
PUT(/user) (更 新 ) 更 新 一 个 用 户 Update() 
DELETE(/user/joe) (删除 ) 删除 用 户 名 为 joe 的 用 户 Remove() 





25.7.2 ”AngularJSs 前 端 设计 


我 们 把 前 端 所 有 的 AngularJS 代码 放 在 项 目 目录 mean/public 下 ,index. html 为 首 
页 ,/public/partials 为 局 部 模板 目录 ,有 用 户 登 录 模 板 login. html, AngularJS 库 文 件 在 
/public/js/lib 下 面 ,public/js 存放 app. js 主 控 程 序 和 controllers. js 控制 模块 。 

浏览 器 地 址 栏 中 输入 http://localhost:8000/#1 /user, 打 开 数 据 操作 界面 如 图 25-3 
所 示 。 
































€ > © | cahostso00m/user 
Username: Password: 
登录 | | 注册 | | 修改 | 删除 | 





图 25-3 浏览 器 端 用 户 操作 界面 


主 控 程 序 app. js 的 代码 配置 helloApp 应 用 ,路 由 “/user” 的 局 部 模板 是 “partials/ 
login. html” ,控制 器 是 userCtrl。 代 码 如 下 。 





var helloApp = angular.module( 'hellohpp'，[ 'ngRoute'，'helloControllers' ]); 
helloApp. config([' $ routeProvider', '$ locationProvider', 
function( $ routeProvider, $ locationProvider) { 
$ routeProvider. 
when( '/user', { 
templateUrl: 'partials/login. html', 
controller: 'userCtrl’ 
}).when('/welcome', { 
templateUrl: 'partials/welcome. html', 
controller: 'WelcomeCtrl' 
DD); 
$ locationProvider. html5Mode( false). hashPrefix('!'); 
1]); 











用 户 管理 的 局 部 模板 在 login. html 文件 中 通过 “ng-model” 指 令 定 义 了 数据 接口 ,“ng- 
controller” 定 义 了 userCtrl 控制 器 ,“ng-click” 定 义 了 单 击 事件 对 应 在 userCtrl 控制 器 里 面 
定义 的 处 理 函 数 , 及 定义 {{message)} 表 达 式 来 显示 从 服务 器 端 返回 的 操作 信息 。 代 码 
如 下 。 





<div ng— controller = "userCtrl"> 
Username: 














第 25 章 “全 栈 Web 开 发 ‖ 221 





< input type = "text" ng 一 model = "username" /> 
Password: 

< input type = "password" ng 一 model = "password" /> 
< hr/> 
<button ng- click = "login()"> 登 录 </button> 
<button ng — click = "register()"> 注 册 </button > 
<button ng- click = "update()"> 修 改 </button > 
<button ng — click = "remove()"> 删 除 </button > 

<br/> {{message}} 

</div> 











控制 器 代码 通过 $http 注入 的 对 象 定义 了 用 户 登 录 (login) .注册 (register)、 修 改 
(update) 和 删除 (remove)RESTful API 的 操作 接口 。 并 发 送 HTTP 请 求 和 处 理 服 务 器 端 
的 返回 响应 信息 “res. data. message”。 代 码 如 下 。 





function userCtrl( $ scope, $ location, $ http){ 
var url = 'http://localhost:8000/user/'; 
var user = {}; 
$ scope. login = function( ){ 
user = { 'uUsername': $ scope. username, 'password': $ scope. password}; 
$ http. get(url + $ scope. username) .then(function(res){ 
$ scope.message = JSON. stringify(res. data. message); 
}, function(err){console. log( 'err:'+err)});} 
$ scope. register = function(){ 
user = {'username': $ scope. username, 'password': $ scope.password}; 
$ http. post (url, JSON. stringify(user)).then(function(res){ 
$ scope. message = JSON. stringify(res. data. message); 
}, function(err){console. log(err)});}; 
$ scope. update = function(){ 
user = { 'username': $ scope. username, 'password': $ scope. password}; 
$ http. put (url, JSON. stringify(user)). then(function(res){ 
$ scope. message = JSON. stringify(res. data. message); 
}, function(err){console. log(err)});}; 
$ scope. remove = function(){ 
user = { 'username': $ scope. username, 'password': $ scope. password}; 
$ http. delete(url + $ scope.username) .then(function(res){ 
$ scope. message = JSON. stringify(res. data. message); 
},function(err){console. log(err)});}}; 











25.7.3 服务 器 后 端 设 计 


首先 ,通过 models\user. js 文件 定义 数据 模型 User 对 象 , 并 与 MongoDB 的 数据 集合 
users 绑 定 ,导出 成 为 Node. js 模块 。user. js 代码 如 下 。 





Var mongoose = requirel( 'mongoose'); 
Var User = new mongoose. Schema({ 
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username: {type: String, index: {funique: true}}, 
password: {type:String, default:'12345'} 
DD); 

module. exports = mongoose.model('Users', User); 











通过 control\routes. js 定义 RESTful 路 由 控制 器 ,这 里 提供 了 和 AngularJS 控制 器 相 
对 应 的 RESTful API 服务 器 端 接 口 。 首 先 ,要 引入 数据 模型 User 二 require('../models/ 
user. js') ,使 用 了 路 由 中 间 件 router 二 express. Router() 来 构造 服务 器 端 数据 访问 服务 。 并 
通过 module. exports 王 router 导出 成 为 Node. js 模块 作为 路 由 控制 器 的 中 间 件 。 

(1) 注册 一 个 新 用 户 ,通过 res. json() 把 数据 操作 结果 发 送 一 个 JSON 格式 的 信息 返回 
给 浏览 器 。 





router. route( '/'). post(function(req, res) { 
var user = new User(req. body); 
user. save(function(err) { 
if (err) { res. send({ message: 'register failed!' }); 
return res. send(err);} 
res. send( { message: 'User Added' });});}); 











(2) 用 户 登 录 , 在 这 里 定义 一 个 “:username” 作 为 路 径 的 参数 传递 用 户 名 值 ,通过 req. 
params. username 获取 浏览 器 端 传递 过 来 的 用 户 名 ,User. find() 查 询 数据 库 返 回 两 个 结果 err 
和 user 作为 回调 函数 参数 来 处 理 查 询 结果 ,user. length! 二 0 表示 查询 到 用 户 ,res. json() 分 
别 返回 “登录 成 功 ”和 和"* 找 不 到 用 户 ” 信 息 。 





router. route('/ :username'). get(function(req，res) { 
User. find({username:req. params. username}, function(err, user) { 
if (err) {return res. send(err);} 
if (user. length!= 0){res. json( {message: 'login success! '} );} 
else {res. json( {message: 'User not found! '})}; });}); 











(3) 更 新 用 户 密码 信息 ,首先 通过 req. body. username 获得 浏览 器 HTTP 的 put 方法 
传递 的 内 容 体 里 面 的 用 户 名 ,User. findOne() 查 询 数据 库 ,返回 err 和 user 结果 ,如 果 user! 
二 null 表示 用 户 存在 ,user[prop] = req. body[prop] 表 示 用 表单 传递 过 来 的 数据 来 更 新 用 
户 信息 ,并 重新 保存 数据 到 数据 库 user. save() 。 





router. route( '/'). put(function(req, res){ 
User. findOne( { username: req. body. username }, function(err, user) { 
if (err) {return res. send(err);} 
if (user!= null) { 
for (prop in req. body) { 
user[prop] = req.body[prop];}; 
user. save(function(err) { 
if (err) {return res. send(err);}; 
res. json({ message: 'User updated!' });}); 
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} else { res. json({ message: 'User not found! '})}})}); 





(4) 删除 用 户 ,通过 User. remove() 删 除 条 件 是 用 户 名 三 req. params. username, 删 除 
结果 会 返回 err 和 done。done. result. n 表示 删除 的 用 户 数 ,“0” 表 示 没 有 符合 条 件 的 用 户 。 








router. route( '/:username'). delete(function(req, res){ 
User. remove( {username: req. params. username}, function(err, done) {if (err) {return res. 
send(err);} 
res. json({ message: 'user deleted:'+ done. result.n });});}); 











最 后 是 服务 器 主 控 程序 mean\server. js 文件 ,首先 通过 express. static() 中 间 件 定义 静 
态 文件 服务 ,让 public 目录 下 的 AngularJS 浏览 器 端 代码 发 送 到 浏览 器 。myRoute 二 
require(". /control/routes.js") ;加载 用 户 定 义 的 路 由 中 间 件 ,app. use(Vuser',myRoute) 让 
所 有 路 径 为 Vuser” 的 访问 通过 myRoute 路 由 中 间 件 处 理 。 





Var express = require('express') 

Var app = express(); 

var path = require("path"); 

Var bodyParser = requirel( 'body — parser'); 

var myRoute = require(". /control/routes. js"); 

app. use( '/user', myRoute); 

app. use( bodyParser. json( )); 

app. use(bodyParser. urlencoded( {extended: false})); 

app. use("/", express. static(path. join(_ dirname, "public"))); 
Var mongoose = require( 'mongoose'); 

var db = mongoose. connection; 

mongoose. Promise = global.Pronmise; 

db. openUri( 'mongodb: //localhost/mydb'); 

db. on( 'error', console. error. bind(console, 'connected error! ')); 
db. once( 'open', function() {console. log('conected! ');}) 

app. listen(8000); 











RE 
完整 的 MEAN 演示 见 例子 25-12。 例子 25-12: 
partd/ch25/mean/server.js 


练习 


1. Node. js 十 Express 可 以 构造 一 个 完善 的 Web 服务 器 ,来 处 理 request 和 response 的 
请 求 响应 。Express 给 这 两 个 对 象 添加 了 丰富 的 属性 和 方法 ,例如 ,res 响应 对 象 返回 浏览 
器 消息 有 res. send() 和 res. render() 方 法 ,编写 代码 分 析 它 们 的 区 别 。 

2. RESTful 的 Web 服务 架构 已 经 非常 流行 ,基本 可 以 取代 传统 的 SOAP Web 服务 ， 
而 Web 服务 涉及 跨 域 资源 共享 (Cross-Origin Resouces Sharing) 问 题 , 也 就 是 浏览 器 从 处 
于 域名 a. com 的 代码 来 访问 域名 b. com 的 数据 。 但 是 ,浏览 器 为 了 数据 安全 ,采用 的 是 同 
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源 策略 (Same Origin Policy ,一 个 页 面 的 请 求 只 能 访问 在 同一 个 域 下 面 的 资源 ) 。cors 的 理 
论 是 b. com 通过 设置 特殊 的 响应 头 , 让 a. com 的 页 面 访问 b. com 的 数据 资源 。Node. js 提 
供 了 一 个 cors 模块 解决 这 个 问题 。 修 改 例 子 25-12, 安 装 cors 模块 ,实现 跨 域 资源 共享 。 

3. Node. js 十 Express 环境 中 ,Express 服务 器 端 提供 了 res. jsonp() 一 个 简单 的 跨 域 返 
回 JSON 格式 数据 包 方法 ,首先 分 析 以 下 JSONP 的 工作 原理 ,在 浏览 器 端 有 一 段 请 求 访问 
外 部 域 的 数据 编码 如 下 : 





< script type = "application/javascript" 
Src = "http://server. other. com/Users/joe"> 
</script> 











但 是 ,由 于 同 源 策略 ,浏览 器 无 法 解析 这 个 从 服务 器 发 来 的 Json 数据 包 , 把 它 变 成 
JavaScript 对 象 ,而 JSONP 的 解决 方法 是 在 请 求 URL 中 添加 一 个 解 包 函 数 作为 参数 ,可 以 
用 这 个 函数 解析 一 起 传递 来 的 数据 包 。 

代码 如 下 ,浏览 器 发 出 一 个 里 域 数据 请 求 (并 带 有 解 包 函 数 parseJson) ,数据 返回 时 , 浏 
览 器 会 加 载 执 行 parseJson ({" Name:"Joe","Id":1001," Age":17));， 把 数据 包 转 成 
JavaScript 对 象 。 





< script type = "application/javascript" src = "http://server.example.com/Users/joe?callback| 
= parseJson"> 
</script> 





在 服务 器 端 Express 使 用 JSONP 实现 外 域 传送 的 JSON 数据 代码 如 下 。 





app. get('/user', function (req, res, next) { 
res. type( 'application/json'); 
res. jsonp(user); //user is json object 


D); 





在 浏览 器 端 可 以 使 用 jQuery 实现 跨 域 访问 数据 ,代码 如 下 。 





< script src = "jquery/jquery. min. js"></script > 
< script type = "text/javascript"> 
$ .getJSON( 'http://server. example. com/Users/joe?callback = ?', function (user) { 
console. log(user) ; 











完善 以 上 代码 ,实现 跨 域 资源 共享 。 





在 实 训 篇 里 ,将 介绍 Web 移动 开发 环境 的 搭建 ,浏览 器 Web 
开发 插件 的 使 用 ,及 本 书 用 到 的 各 种 开发 工具 安装 ,例如 Node.js 
和 MongoDB 等 。 从 书本 看 代码 ,似乎 很 容易 看 懂 , 但 是 动手 写 代 
码 的 时 候 ,就 会 遇 到 一 大 堆 问 题 。 写 代码 很 简单 ,很 多 代码 可 以 
从 网 上 复制 下 来 ,我 们 不 反对 复制 代码 ,因为 很 多 代码 是 开源 的 ， 
但 是 ,我 们 鼓励 按 自己 的 思路 去 修改 代码 。 只 有 亲自 动手 做 实 
验 , 写 代码 ,调试 ,运行 ,才能 体验 成 功 的 乐趣 。 

在 实 训 阶段 ,推荐 采用 团队 合作 学 习 方式 ,因为 实 训 就 是 模 
拟 企 业 的 开发 环境 ,而 软件 企业 都 是 以 开发 团队 的 形式 完成 一 个 
软件 项 目的 开发 ,所 以 ,可 以 让 学 生 按 软件 工程 的 原则 成 立 学 习 
小 组 , 按 企业 开发 模式 管理 小 组 ,让 每 个 学 生 感 受 软 件 开发 的 艰 
苦 与 快乐 。 


失败 是 成 功 之 母 





第 426) 音 


实 训 准备 一 一 团队 学 习 模 式 


26.1 团队 合作 学 习 


在 计算 机 软件 行业 中 ,特别 强调 团队 合作 精神 。 很 多 大 型 软件 项 目 , 如 操作 系统 ,都 是 
团队 合作 开发 的 结果 。 在 软件 工程 中 ,配对 编程 (Pair Programming) 一 一 一 个 人 输入 代码 ， 
另 一 个 人 同时 检查 语法 和 结构 的 错误 ,也 是 团队 合作 的 一 个 成 功 典范 。 所 以 ,在 本 课程 的 实 
训 环 节 ,鼓励 采 用 团队 学 习 模式 。 

团队 合作 学 习 不 仅 是 解决 知识 技术 的 学 习 , 还 是 一 种 培养 学 生 建立 企业 综合 素质 和 职 
业 道 德 的 学 习 模 式 ,主要 体现 在 下 面 两 个 方面 。 

(1) 团队 合作 学 习 可 提高 学 生 的 综合 素质 ,IT 人 才 需 求 已 从 原先 的 技术 型 转向 复合 
型 ,对 综合 素质 的 要 求 越 来 越 高 。 以 前 要 求 技术 好 ,现在 不 仅 技术 要 好 ,还 要 具备 良好 的 职 
业 素 养 和 心理 素质 ,如 外 语 交流 能 力 、 团 队 合 作 能 力 等 ; 不 仅 要 掌握 先进 的 IT 技术 知识 ,还 
要 懂 管 理 . 善 沟 通 。 因 此 ,当前 社会 的 人 才 需 求 更 看 中 的 是 学 生 的 情商 。 而 学 生 通 过 团队 合 
作 学 习 , 可 以 提高 社交 和 合作 能 力 。 

(2) 团队 合作 学 习 中 引入 职业 道德 教育 ,在 团队 合作 学 习 过 程 中 会 发 现职 业 道德 的 冲 
突 问题 。 例 如 ,团队 之 间 如 何 和 谐 相 处 ,小 组 成 员 如 何 互助 互 爱 ,如 何 扮演 好 职业 角色 ,需要 
引入 职业 道德 与 行为 规范 教育 来 指导 ,这 是 传统 教学 模式 无 法 做 到 的 。 


26.2 学 习 小 组 组 成 


在 软件 工程 开发 中 ,软件 工程 管理 的 主要 方面 是 人 员 管 理 , 人 员 管 理 强 调 的 是 团队 合作 
精神 ,其 中 的 一 个 重要 过 程 是 开发 团队 的 组 建 ,根据 人 员 的 性 格 特点 ,取长补短 来 组 队 。 团 
队 的 组 队 按 管理 模式 ,可 以 分 为 专家 型 .民主 型 两 种 ,团队 小 组 的 人 数 一 般 为 3 一 6 人 比较 合 
适 。 建 立 一 个 专家 型 小 组 ,也 就 是 挑选 出 一 些 编程 能 力 强 的 同学 作为 小 组 的 领队 专家 ,再 根 
据 软 件 工 程 的 组 队 原 则 ,选择 不 同 素质 和 性 格 的 同学 加 入 小 组 ,还 有 适当 的 男女 生 搭配 比 
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例 。 专 家 型 小 组 的 优点 在 于 技术 好 的 同学 可 带领 技术 弱 的 同学 共同 进步 。 另 一 种 组 队 方 式 
是 由 学 生 按 照 自己 的 意愿 ,自由 组 合 学 习 小 组 ,这样 形成 的 小 组 可 能 会 造成 小 组 能 力 之 间 的 
差距 ,学 习 好 的 同学 喜欢 组 成 一 个 小 组 , 差 的 同学 被 排挤 形成 其 他 小 组 。 这 种 自由 组 合 形成 
的 学 习 小 组 ,不 适合 大 学 课程 团队 学 习 的 组 队 方式 ,不 建议 采用 。 

学 习 小 组 的 建立 ,还 有 一 个 目的 就 是 模拟 企业 的 开发 环境 ,所 以 ,学 生 在 小 组 成 立 后 ,应 
该 根据 软件 开发 行业 的 市 场 招聘 职位 ,在 项 目 小 组 中 设置 不 同 的 角色 职位 。 例 如 ,数据 库 设 
计 师 、 网 页 设计 师 、 项 目 经 理 , 软 件 测试 师 等 ,让 每 一 个 成 员 都 有 机 会 担当 每 一 个 角色 ,为 今 
后 学 生 选 择 职 业 角 色 明 确 目 标 。 


26.3 小 组 管理 


前 面 提 到 ,团队 的 管理 分 成 专家 型 小 组 管理 模式 和 民主 型 小 组 管理 模式 。 专 家 型 小 组 
管理 模式 是 指定 小 组 最 好 的 成 员 作为 组 长 ,领导 小 组 整个 学 习 过 程 的 管理 。 民 主 型 小 组 管 
理 模式 是 每 周 选举 不 同 的 小 组 成 员 作 组 长 ,主持 小 组 的 日 常 工作 。 小 组 每 周至 少 开 一 次 会 
议 ,确定 项 目 计划 和 目标 ,并 要 求 每 一 次 会 议 都 有 会 议 文档 记录 ,教师 轮流 参加 每 个 小 组 的 
会 议 ,会 议 上 听取 上 一 周 的 工作 总 结 和 这 周 的 工作 计划 。 民 主 型 管理 模式 的 优点 在 于 提高 
每 个 同学 的 参与 兴趣 ,培养 每 个 成 员 的 责任 心 和 领导 才能 ,加 强 团队 的 凝聚 力 。 

除了 人 的 管理 外 ,小 组 还 要 学 习 项 目 管理 ,时间 管理 等 软件 工程 方面 的 一 些 管理 方法 。 
团队 学 习 模式 可 能 发 生 的 问题 是 “三 个 和 尚 没 水 喝 ”, 小 组 成 员 相 互 推 请 ,不 负责 任 , 造 成 小 
组 管理 散漫 ,小 组 运行 不 正常 ,形同虚设 。 所 以 ,监督 小 组 的 管理 非常 重要 ,好 的 小 组 管理 是 
“三 人 行 , 必 有 我 师 ”, 达 到 各 尽 所 能 ,好 的 管理 团队 还 应 该 达到 最 高 境界 “三 个 臭 皮 匠 赛 过 诸 
葛 亮 ”成 员 经 常 开 会 讨论 ,一 起 解决 学 习 问 题 , 互 相 帮助 ,共同 进步 。 


26.4 小 组 考核 


团队 合作 学 习 进 行 的 教学 项 目 与 传统 的 以 考试 为 验收 标准 的 项 目 不 同 ,应 通过 各 种 指 
标 来 评价 小 组 及 个 人 的 学 习 成 果 。 如 采取 组 内 自 评 \、 组 间 互 评 、 教 师 评价 等 考核 方式 。 每 个 
小 组 必须 按照 软件 工程 的 规范 来 完成 软件 工程 项 目的 开发 和 实验 ,要 求 小 组 提交 的 一 个 项 
目 技术 文档 要 有 系统 需求 报告 书 .UML 建 模 的 系统 设计 书 、 软 件 使 用 说 明 书 等 软件 工程 文 
档 。 小 组 完成 一 个 课程 的 项 目 设 计 和 开发 ,可 以 通过 答辩 形式 考核 小 组 的 成 绩 。 答 辩 过 程 
要 求 对 软件 原 代 码 进行 分 析 说 明 ,并 制作 PPT 幻灯 演示 介绍 软件 系统 的 功能 、 特 点 、 经 验 。 
现场 运行 ,演示 系统 。 同 时 ,每 个 小 组 成 员 还 要 提交 个 人 工作 总 结 ,要 具体 说 明 在 小 组 中 承 
担 的 角色 ,做 了 哪些 事情 , 碰 到 哪些 问题 ,怎样 解决 的 问题 。 小 组 答辩 中 要 公开 个 人 的 工作 
总 结 ,避免 弄虚作假 。 具 体 考 核 内 容 如 下 。 

(1) 小 组 工作 日 志 , 例 如 ,开会 讨论 记录 。 

(2) 小 组 的 实验 代码 演示 。 

(3) 小 组 提交 的 实验 报告 。 

(4) 其 他 软件 文档 (可 行 性 分 析 , 用 户 需求 ,系统 设计 , 原 码 ,测试 报告 等 ) 。 

(5) 小 组 成 员 个 人 小 结 。 
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练习 


1. 找 一 个 同学 或 朋友 一 起 做 “配对 编程 (Pair Programming)”, 一 个 人 输入 代码 , 另 一 
个 人 在 旁边 观察 代码 结构 ,感受 一 下 "配对 编程 "的 好 处 。 

2. 如 果 调 试 了 一 天 的 代码 而 得 不 到 正确 结果 ,不 要 再 外 牛角 尖 , 找 一 个 同学 或 朋友 帮 
你 看 看 代码 , 换 一 个 人 , 换 一 种 思路 ,因为 你 的 思路 短路 了 。 这 样 可 以 更 快 解决 问题 。 

3. 成 立 一 个 移动 Web 应 用 开发 兴趣 小 组 或 俱乐部 ,大 家 可 以 互相 鼓励 共同 进步 ,不 要 
孤军 奋战 ,一 个 人 的 代码 世界 会 往往 感到 很 孤独 。 

4. 团队 项 目 开 发 必须 学 习 软 件 版 本 控制 管理 (Version Control System,VCS) ,这样 可 
以 多 个 成 员 一 起 修改 、 编 辑 软件 ,而 不 需要 等 待 个 别 的 成 员 修改 、 编 辑 结果 ,提高 了 团队 合作 
的 工作 效率 。VCS 的 工作 原理 是 分 布 式 的 方式 ,所 有 成 员 都 可 以 从 代码 库 中 取出 一 个 代码 
文件 进行 修改 ,然后 提交 回 代码 库 ,代码 库 根 据 需 要 选择 性 地 合并 ,形成 新 的 版 本 。 目 前 比 
较 流行 的 版 本 控制 工具 有 Subversion(SVN) 和 Git。 这 里 推荐 学 习 Git, 请 到 官网 www. 
git-scem. com/downloads, 选 择 操作 系统 平台 版 本 下 载 、 安 装 。Git 提供 控制 台 命 令 和 GUI 
图 形 化 工具 。 建 议 学 习 控 制 台 命令 来 管理 软件 版 本 。 要 实现 团队 合作 开发 ,需要 把 软件 代 
码 放 到 远程 代码 库 服务 器 或 自己 在 局 域 网 搭建 代码 库 服 务 器 ,推荐 使 用 开源 代码 库 GitHub 
系统 ,到 官网 https://github. com 注册 一 个 账号 ,学 习 使 用 Git 工具 将 代码 提交 到 GitHub 
代码 库 , 实 现 团 队 合 作 开发 。 
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移动 开发 环境 搭建 实验 


27.1 实验 目的 


(1) 学 习 Web 开发 环境 的 搭建 。 

(2) 掌握 Web 代码 编辑 器 的 使 用 ,制作 一 个 简单 的 hello world 网 页 。 
(3) 设置 Apache 服务 器 参数 ,让 手机 可 以 通过 本 地 IP 访问 。 

(4) 了 解 浏览 器 的 开发 者 (Developer) 及 Web 扩展 工具 。 

(5) 掌握 Web 开发 者 工具 的 基本 测试 功能 。 


27.2 实验 环境 及 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 
(2) Firefox 浏览 器 。 

(3) Brackets 代码 编辑 器 。 

(4) WAMP 服务 器 。 

(5) Android 或 iPhone 手机 。 


27.3 实验 方法 


27.3.1 Apache Web 服务 器 介绍 


Web 应 用 是 B/S 架构 ,需要 浏览 器 和 Web 服务 器 两 端 协同 工作 。Web 服务 器 的 基本 
功能 是 提供 HTTP 通信 请 求 响应 服务 。Web 服务 器 的 软件 很 多 ,我 们 使 用 的 Windows 系 
统 就 有 微软 的 IIS Web 服务 器 .但 是 ,Apache Web 服务 器 是 目前 最 流行 的 .开源 免费 软件 。 
Apache Web 服务 器 常常 与 其 他 应 用 服务 器 集成 在 一 起 ,提供 全 方位 服务 。 例 如 ,与 Java 语 
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言 作为 服务 器 端 脚本 语言 ,就 是 Tomcat 服务 器 ,早期 网 站 开发 最 流行 的 服务 器 端 语言 
PHP, 所 以 有 很 多 公司 将 Apache Web 服务 器 与 PHP 集成 。 如 果 要 做 一 个 动态 网 站 ,需要 
存储 实时 的 动态 数据 ,就 要 有 数据 库 服务 器 一 起 协同 工作 。 提 供 数 据 库 服务 的 软件 系统 也 
很 多 ,微软 也 有 自己 的 MS SQL Server 关系 数据 库 系统 ,而 最 流行 的 开源 数据 库 是 
MySQL。 为 了 简化 服务 器 的 搭建 ,有 一 些 公司 提供 Web 服务 器 的 集成 系统 ,而 且 是 免费 
的 ,当然 最 常见 的 Web 服务 器 集成 系统 是 LAMP(Linux 十 Apache 十 MySQL 十 PHP) ,这 是 
Linux 操作 系统 下 的 Web 集成 服务 器 系统 。Windows 操作 系统 Web 服务 器 集成 系统 也 很 
多 ,常见 的 有 WAMP、XAMP 等 ,这 些 系统 都 是 Windows 十 Apache 十 MySQL 十 PHP。 我 
们 选择 WAMP 作为 Web 应 用 开发 服务 器 ,虽然 移动 Web 应 用 基本 是 前 端 开发 ,服务 器 端 
提供 HTTP 服务 基本 满足 要 求 ,而 且 是 静态 资源 访问 服务 ,不 需要 PHP 脚本 语言 
MySQL 数据 库 支持 。 


27.3.2 安装 WAMP 服务 器 


由 于 Apache 官网 仅 提供 开源 代码 ,而 不 提供 Windows 安装 版 的 二 进 制 可 执行 文件 ， 
要 直接 安装 Apache Web 服务 器 ,需要 通过 第 三 方 编译 好 的 版 本 ,这 里 选择 WAMP 3. 0.6 
64b 版 本 ,可 以 在 https://sourceforge. net/projects/wampserver/? source 一 typ_redirect 
下 载 。 按 照 安装 向 导 完 成 安装 ,启动 WAMP, 在 Windows 的 系统 任务 提示 栏 中 可 以 看 到 
WAMP 图 标 ,图 标 为 绿色 表示 启动 正常 ,红色 表示 启动 失败 。 

打开 浏览 器 ,访问 http://localhost, 看 到 如 图 27-1 所 示 的 管理 页 面 表示 服务 器 运行 正常 。 


Sm ch Een 全 自 于 育 ， 











© 


Server Configuration 
Apache Version: 2.4.23 - Documentation 
PHP Version: 5.5.25 - Documentation 
Server Software: Apache/2.4.23 (Win64) PHP/5.5.25 - Port defined for Apache: 80 
| Loaded Extensions: 逢 apachezhandier 。。 关 bometh 因 bz2 四 cerdor 








图 27-1 WAMP 浏览 器 端的 管理 界面 


27.3.3 ”Web 代码 编辑 器 


Web 代码 编辑 器 有 很 多 选择 ,例如 ,Notepad 十 十 ,Sublime Text 和 Brackets 都 是 不 错 
的 Web 代码 编辑 器 ,都 支持 HTML/CSS/JavaScript 的 语法 加 亮 和 提示 功能 ,方便 语法 检 
查 和 纠 错 。 这 里 推荐 安装 Brackets。 到 官网 http://brackets. io/ 下 载 最 新 版 本 安装 包 , 按 
照 安装 向 导 完 成 安装 。 创 建 一 个 最 简单 的 HTML 代码 index. html, 如 下 。 





<! DOCTYPE html > 
<html> 
<head> 
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<title> Hello World</title> 
</head> 
<body> 
<hl > Hello World</hl > 
</body> 
</html > 











WAMP 安装 目录 \www 是 Web 的 根 目 录 , 所 有 的 Web 应 用 代码 都 部 署 在 这 个 目录 下 
面 。 创 建 一 个 新 文件 夹 ch27 ,将 index. html 保存 到 ch27 目录 里 面 。 
通过 浏览 器 访问 http//localhost/ch27/index. html, 可 以 在 浏览 器 端 看 到 “Hello World”。 


27.3.4 手机 访问 Apache Web 服务 器 


WAMP 安装 目录 是 C:\wamp64, 其 中 C;\wamp64\bin\apache\apache2. 4. 23\conf\ 
httpd. conf 是 Apache 的 主 配置 文件 。 在 开发 环境 中 , Web 服务 器 和 客户 机 是 在 同一 台 计 
算 机 上 ,所 以 ,浏览 器 可 以 通过 系统 默认 的 本 地 IP 地 址 127. 0. 0. 1 或 本 地 域名 localhost 访 
问 Web 服务 器 。 为 了 测试 ,让 手机 或 其 他 移动 设备 通过 网 络 连接 本 地 服务 器 ,需要 通过 真 
实 的 机 器 IP 地 址 访问 ,也 就 是 计算 机 启动 时 ,由 路 由 器 或 交换 机 自动 分 配 的 IP 地 址 。 

为 了 让 网 络 上 的 设备 可 以 访问 Apache Web 服务 器 ,需要 做 一 些 设 置 。 首 先 打开 
Windows 命令 行 窗口 ,输入 命令 ipconfig ,查看 IPv4 地 址 为 192. 168. 1. 194。 (由 路 由 器 的 
DHCP 服务 器 分 配 的 IP 地 址 会 有 不 同 ) 

打开 C:\wamp64\bin\apache\apache2. 4. 23\conf\extra\httpd-vhost. conf, 把 一 个 
Web 应 用 设置 成 一 个 虚拟 主机 ,其 中 ,ServerName 192. 168. 1. 194 是 本 机 的 IP 地 址 。 添 加 
以 下 代码 。 





<VirtualHost * :80> 
ServerName 192.168.1.194 
DocumentRoot c:/wamp64/www 
<Directory "c:/wamp64/www/ch27"> 
Options + Indexes + Includes + FollowSymLinks + MultiViews 
AllowOverride All 
Require all granted 
</Directory> 
</VirtualHost > 





保存 后 重新 启动 服务 器 ,打开 浏览 器 ,访问 192. 168. 1. 194/ch27/index. html, 看 到 
“Hello World” 表 示 设 置 成 功 。 让 手机 Wi-Fi 连接 到 与 计算 机 相同 的 局 域 网 内 ,打开 手机 浏 
览 器 ,访问 同样 的 IP 地址 ,应 该 得 到 一 样 的 结果 。 


27.3.5 用 浏览 器 开发 者 工具 


浏览 器 的 种 类 很 多 , Windows 10 就 自 带 有 Internet Explorer 和 Microsoft Edge 浏览 
器 ,并 且 都 默认 安装 了 “F12 开发 人 员工 具 ”, 而 考虑 较 好 的 Web 应 用 兼容 性 问题 ,Web 开发 
人 员 会 根据 浏览 器 的 排行 ,用 使 用 最 多 的 浏览 器 作为 测试 。 同 时 ,开发 人 员 也 根据 浏览 器 拥 
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有 的 丰富 开发 插件 来 选择 浏览 器 ,我们 选择 Mozilla Firefox 和 Google Chrome 浏览 器 作为 
主要 开发 工具 。 

打开 Firefox 浏览 器 ,访问 http://localhost/ch27/index. html, 按 F12 键 打开 开发 者 工 
有 具 ,如 图 27-2 所 示 ,选择 “网 络 ”, 刷 新 访问 页 面 , 可 以 看 到 所 有 从 服务 器 加 载 的 资源 文件 。 
单 击 某 一 文件 ,可 以 观察 HTTP 请 求 和 响应 头 的 信息 。 
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图 27-2 通过 开发 者 工具 观察 HTTP 包头 信息 


通过 控制 台 (Console) 来 观察 运行 过 程 中 的 错误 和 警告 信息 ,及 通过 console. log() 输 出 
的 信息 。 

单 击 浏览 器 工具 栏 最 右 侧 的 菜单 图 标 ,选择 附加 组 件 ”, 选 择 侧 边 栏 分 类 “网 页 开发 ”， 
可 以 看 到 更 多 的 网 页 开发 工具 ,如 图 27-3 所 示 。 
加 网 页 开发 
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图 27-3 附加 组 件 的 各 种 工具 插件 


27.4 实验 拓展 


在 Firefox 浏览 器 的 “附加 组 件 ” 页 面 查询 RestClient 组 件 ,安装 学 习 RestClient 工具 的 
使 用 。 


响应 式 Web 设 计 实 验 


28.1 实验 目的 


(1) 了 解 移动 布局 三 个 要 素 ( 块 元 素 ,字体 ,图 片 )。 
(2) 了 解 移动 布局 优化 技术 @media,@viewport。 
(3) 学 习 移 动 布局 测试 ,浏览 器 和 模拟 器 的 使 用 。 
(4) 用 以 上 技术 制作 一 个 响应 式 移动 布局 的 小 组 介绍 首页 。 


28.2 实验 环境 及 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 

(2) Firefox、Chrome 浏览 器 或 Opera Emulator 移动 模拟 器 。 
(3) Brackets 代码 编辑 器 。 

(4) WAMP 服务 器 。 


28.3 ”实验 方法 

制作 一 个 小 组 成 员 及 项 目 介绍 网 页 ,用 两 列 布局 风格 ,但 是 , 当 设 备 屏 幕 像素 宽度 小 于 
800px 时 ,自动 响应 成 一 列 布局 。 网 页 要 求 有 小 组 成 员 Logo 和 一 张 小 组 成 员 照 片 。 要 达到 
响应 式 设 计 效 果 , 代 码 设计 应 遵循 三 个 原则 : CSS 值 的 改变 ,媒体 (Media) 查询 ,视窗 
(Viewport) 优 化 。 


28.3.1 Responsive 移动 布局 CSS 值 改变 


布局 的 改变 : 桌面 网 站 设计 多 列 布局 ,而 移动 网 站 中 应 该 用 流体 布局 (一 列 ), 响 应 式 布 
局 是 它 可 以 根据 不 同 移动 设备 屏幕 分 辩 率 大 小 来 动态 改变 布局 。 响 应 式 布局 要 求 改变 以 下 
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三 个 元 素 的 CSS 值 。 
(1) 块 元 素 用 百分数 (%%) 代 替 像 素 (px) 。 
(2) 字体 大 小 用 em 蔡 代 px。 
(3) 图 片 用 max-width 一 100% 。 


28.3.2 Responsive 移动 优化 .媒体 查询 

(1) 在 HTML 页 面 文件 用 < link media 一 ”… ">。 

(2) 或 者 ,在 CSS 样式 文件 中 用 @media。 

28.3.3 ”Responsive 移动 优化 .视窗 优化 

(1) 在 HTML 页 面 文件 中 用 < meta name 王 "viewport… ">。 
(2) 或 者 ,在 CSS 样式 文件 用 @viewport。 

28.3.4 测试 环境 搭建 与 测试 效果 


(1) 安装 Opera Emulator 移动 Opera 浏览 器 测试 工具 ,或 通过 Chrome 浏览 器 开发 者 
工具 测试 效果 。 
(2) 当 屏 幕 小 于 800px 时 ,观察 两 列 布局 切换 到 一 列 布局 的 效果 。 
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UI 外 观 设计 实验 


29.1 实验 目的 


(1) 熟悉 CSS 3 特效 技术 ( 圆 角 ,阴影 ,渐变 ,透明 ,背景 图 ,过 渡 , 变 换 ) 。 

(2) 熟悉 < canvas > 2D 绘图 技术 ( 线 ,矩形 , 圆 , 弧 , 填 充 ,透明 ,阴影 ,渐变 ,过 渡 , 变 换 ， 
文字 ,纹理 图 案 ) 。 

(3) 熟悉 @font-face 技术 。 


29.2 实验 环境 及 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 
(2) Firefox 或 Chrome 浏览 器 。 

(3) Brackets 代码 编辑 器 。 

(4) WAMP 服务 器 。 


29.3 实验 方法 

在 上 一 章 ( 第 28 章 ) 代 码 基 础 上 ,用 CSS 3 特效 ,Canvas 绘图 ,@font-face 字体 三 种 技 
术 制作 一 个 小 组 Logo。 要 求 用 Web Font 字体 ,用 CSS 3 特效 技术 ,将 小 组 照片 用 过 渡 特 
效 打 开 。 互 联网 上 有 很 多 炫 酷 的 按钮 和 图 片 特效 ,所 以 可 先 参考 别人 的 代码 ,实验 方法 
如 下 。 

(1) 在 互联 网 中 查找 HTML 5 十 CSS 3 制作 的 按钮 及 源码 。 

(2) 在 互联 网 中 查找 照片 过 渡 及 变换 效果 的 源码 。 

(3) 在 上 一 个 实验 的 源码 基础 上 修改 添加 制作 小 组 网 站 Logo 图 片 ,添加 按钮 ,打开 网 
页 时 ,将 小 组 成 员 的 图 片 用 变换 效果 弹出 。 
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多 媒体 音频 视频 实验 


30.1 实验 目的 


(1) 掌握 < video >、< audio > 的 基本 使 用 规则 。 

(2) 掌握 文件 API 的 基本 概念 。 

(3) 掌握 拖 放 API 的 基本 概念 。 

(4) 掌握 离线 应 用 。 

(5) 将 做 好 的 播放 器 放 到 小 组 页 面 中 ,并 可 以 实现 全 屏 播放 。 


30.2 实验 环境 及 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 
(2) Firefox 浏览 器 。 

(3) Brackets 代码 编辑 器 。 

(4) WAMP 服务 器 。 

(5) Android 或 iPhone 手机 。 


30.3 实验 方法 


制作 一 个 基于 浏览 器 的 视频 播放 器 ,有 基本 的 播放 /暂停 ,停止 ,后 退 , 快 进 功能 ,并 且 还 
可 以 浏览 打开 本 地 文件 , 拖 放 视频 文件 播放 功能 ,在 离线 情况 下 ,播放 器 应 该 可 以 正常 运行 ， 
并 可 以 打开 、 播 放 本 地 视频 。 具 体 方 法 如 下 。 

(1) 用 < video > 制作 一 个 浏览 器 播放 器 。 

(2) 用 File API 打开 本 地 视频 文件 。 

(3) 用 拖 放 API 完 成 视频 文件 拖 人 播放 功能 。 

(4) 将 播放 器 设置 成 离线 应 用 。 

(5) 将 代码 放 到 Web 服务 器 运行 ,测试 播放 器 离线 播放 效果 。 
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离线 应 用 实验 


31.1 实验 目的 
(1) 掌握 离线 应 用 基本 原理 。 
(2) 掌握 Manifest 文件 的 编写 。 
(3) 掌握 Chrome 浏览 器 开发 者 工具 调试 应 用 。 
(4) 掌握 离线 缓存 文件 的 更 新 ,管理 。 


31.2 实验 环境 及 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 
(2) Chrome 浏览 器 或 360 极速 浏览 器 。 

(3) Brackets 代码 编辑 器 。 

(4) WAMP 服务 器 。 


31.3 实验 方法 


31.3.1 离线 应 用 缓存 事件 检查 


用 第 16 章 的 cacheapp. html 作为 实验 代码 ,启动 WAMP 服务 器 ,打开 Chrome 浏览 器 
或 360 极速 浏览 器 ,访问 http://localhost/ch16/cacheapp. html。 打 开 开 发 者 工具 ,通过 打 
开 Console 选项 卡 查 看 缓存 事件 记录 ,如 图 31-1 所 示 。 


31.3.2 缓存 文件 资源 检查 


打开 开发 者 工具 ,通过 选择 Resources 选项 卡 查 看 Application Cache 的 缓存 文件 记录 ， 
如 图 31-2 所 示 。 
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@ itop YY 国 Ppresevelog 


Document was loaded from Application Cache with manifest http://localhost/chie/cachefile.manifest 
Application Cache Checking event 


Application Cache NoUpdate event 
tooltipBootstrapper.ts: document Url: http://localhost/chie/cacheapp.html 


tooltipBootstrapper.cs: tt_process got a response of false 
>| 














31-1 Chrome 浏览 器 查看 缓存 事件 
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Y 国 Application Cache 


Y 国 cachefilemanifest 


时 cachesonge 
Service Workers 











31-2 ”Chrome 浏览 器 开发 者 工具 查看 缓存 资源 记录 


31.3.3 Manifest 文件 本 地 缓存 检查 


在 浏览 器 新 窗口 中 打开 chrome://appcache-internals ,查看 Manifest 被 浏览 器 自动 缓 
存 到 本 地 ,如 图 31-3 所 示 。 





《 C 5 人 © chrome://appcache-internals 


Application Cache 


Instances in: cusers\oelappdataloca\360chrome\chromeWser Data\Default (1) 
http/Mocalhosy 


Manifest http Jiocalhostch10/cachefle manifest 
Size: 448 kB 


» Creation Time: Mon Oct 10 2016 11:58:32 GMT+0800 (China Standard Time) 
。 LastAccess Time: Mon Oct 10 2016 12:40:39 GMT+0800 (China Standard Time) 
» LastUpdate Time: Mon Oct 10 2016 11:58:32 GMT+0800 (China Standard Time) 


图 31-3 检查 Manifest 文 件 在 浏览 器 中 的 本 地 缓存 


31.3.4 清除 离线 应 用 缓存 


断 开 WWW 服务 器 ,重新 连接 到 cacheapp. html。 每 一 个 浏览 器 都 有 手动 清除 本 地 组 
存 设置 ,如 图 31-4 所 示 是 360 极速 浏览 器 的 缓存 清理 设置 。 








隐私 设置 淹 生 上 网 请 迹 : 清除 上 网 启 迹 - 
过 自动 停 用 来 源 不 明 的 扩展 
图 31-4 手动 清除 离线 应 用 缓存 











31.4 实验 拓展 
把 22 章 例子 22-1 的 摄像 头 拍 照应 用 变 成 一 个 离线 应 用 。 
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网 络 通信 与 本 地 数据 存储 实验 


32.1 实验 目的 


(1) 熟悉 Web Socket 的 原理 。 

(2) 了 解 HTML 5 Web Socket 的 客户 端 编程 接口 。 

(3) 了 解 Web Socket 的 服务 器 端 其 中 一 种 语言 的 编程 接口 ,例如 Java 语言 ,基于 
Tomcat 服务 器 ,或 者 了 解 JavaScript 服务 器 端 语言 ,基于 Node. js。 

(4) 掌握 客户 端 数 据 的 存储 方式 。 

(5) 下 载 一 个 开源 的 基于 Web Socket 的 网 络 聊天 应 用 ,学 会 修改 代码 。 

(6) 学 会 搭建 相应 的 服务 器 运行 环境 ,运行 .调试 聊天 软件 。 

(7) 学 会 用 浏览 器 开发 者 工具 查看 Web Socket 的 通信 原理 ,及 测试 。 


32.2 实验 环境 与 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 
(2) Node. js。 

(3) Git, 

(4) Socket. io。 

(5) Chrome 浏览 器 。 

(6) Brackets 代码 编辑 器 。 

(7) WAMP 服务 器 。 
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32.3 实验 方法 


32.3.1 基于 Node.js+ Socket.io 的 运行 环境 搭建 


下 载 安 装 Git 版 本 管理 工具 ,下 载 官 网 : https://git-scem. com/download/win。 按 照 安 
装 向 导 , 选 择 默认 安装 选项 ,完成 安装 。 

创建 项 目 目录 websocket, 打 开 Windows 命令 行 窗口 ,用 cd 命令 进入 websocket 目录 。 

通过 Git 工具 ,下 载 Web Socket 聊天 演示 代码 https://github. com/socketio/chat- 
example。 下 载 命令 如 下 。 





git clone https://github. com/socketio/chat - example 











下 载 安装 Windows 版 的 node. js ,安装 请 参考 35 章 。 
在 Windows 命令 行 窗口 ,进入 chat-example 下 载 的 演示 代码 目录 ,通过 NPM 安装 
socket. io 模块 到 本 地 node_modules 目录 下 ,命令 如 下 。 





npm install socket. io 





启动 Web Socket 服务 器 ,命令 如 下 。 





node index. js 











打开 Chrome 浏览 器 ,输入 “http://localhost: 3000”, 在 聊天 窗口 中 输入 信息 , 单 击 
Send 按钮 ,将 聊天 信息 发 送 到 服务 器 ,又 从 服务 器 返回 来 .打印 在 网 页 上 。 
进一步 学 习 socket. io 的 接口 ,可 以 到 官网 https://socket. io/get-started/chat/ ,分 析 代 码 。 


32.3.2 浏览 器 开发 者 工具 检查 Web Socket 


按 F12 键 ,打开 Chrome 浏览 器 的 开发 者 工具 ,选择 Network 选项 卡 ,刷新 聊天 网 页 ， 
可 以 看 到 网 络 资源 加 载 和 连接 情况 ,如 图 32-1 所 示 。 














民 所 | Hements Console Sources Network Performance Memory Application Security Audits | 
@O|lm TF vew ST | 目 presevelog 目 Diablecache | Offine Nothrotting Y 
log 
Filter 目 Regex 目 Hide data URLs 四 XHR JS CSS Img Media Font Doc WS Manifest Other 
Name Status |Type Initiator Size Waterfall 4000t .2s 600%0g] 
DD localhost 304 document Other 2428 -外 
socketio-12.0js 200 script (inde (from me. 
javey-111.1$ 200 script finden (from me 
口 ?Bo=3atransport=polingat=1503497870152-0 200 xhr socketio-120js2 3298 
[DD ?HI0=3&transport=polling&t=1503497870253-.. 200 xhr Socketio-120js2 2318|= 1 
口 mo=3a&transport=websocketasid=viaevukfc 101 websocket socketio-12.0js2 0B 
6requests | 802B transferred | Finish: 427 ms | DOMContenttoaded: 368 ms | Load: 372 ms 








32-1 开发 者 工具 观察 Web Socket 信道 的 建立 
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其 中 一 个 是 Web Socket 的 信道 连接 ,这 个 连接 是 从 socket. io-1. 2. 0. js 模块 发 出 的 , 连 
接地 址 : ws://localhost: 3000/socket. io/? EIO = 3&&transport 一 websocket& sid 一 


ViQeYukFcCz99QIFAAAE, 
状态 码 是 “101” 表 示 HTTP 101 Switching Protocol( 协 议 切换 ) ,服务 器 应 客户 端 升级 


协议 的 请 求 (Upgrade 请 求 头 ) 正 在 进行 协议 切换 。 单 击 链接 地 址 ,显示 HTTP 包头 信息 ， 
如 图 32-2 所 示 。 


Elements Console Sources Network Performance Memory Application 
轩 Offine No throt| 


民 外 


二 | 四 可 View 演 二 目 presevelog 目 Disablecache 
目 pegex 目 Hide dataurts 图 | xhg Js css Ime Media Font Dol 














Fiker 
Name x | Headers | Fames Cookies Timing 
口 ocalhost Vv General 
,socketio-12.0js Request URL: ws://1ocalhost;3998/socket.io/?EIO=38&1 
[Djavery-1.11.1js AN 

Request Method: GET 
口 ?Bo-=3&transport=polling&t= -| 。 Status Code: @ 101 Switching protocols 





| Y Response Headers 。 view source 
Connection: Upgrade 
Sec-WebSocket-Accept: 31418S1Xjjtizs]3eNmotAt+oRo= 
Sec-WebSocket-Extensions: permessage-deflate 
Upgrade: websocket 
vRequest Headers 。 view source 
Accept-Encoding: gzip, deflate, sdch, br 
Accept-Language: zh-CH,zh;q-0.8 
Cache-Controk no-cache 
Connection: Upgrade 
Cookie: io-viQeYukFcCz99Q1FAAAE 
Host: localhost:3600 


[D ?EI0=3&transport=pollingext 














6 requests | 802B transferred | Fi.. 


图 32-2 从 HTTP 包头 信息 观察 一 个 Web Socket 的 连接 请 求 与 响应 过 程 





从 包头 可 以 看 到 “Connection: Upgrade”, 协议 升级 ,升级 的 协议 为 “Upgrade: 
websocket”。 同 时 ,Request URL 地 址 是 “ws://”, 表 示 一 个 WebSocket 连接 。 


32.4 实验 拓展 
通过 本 地 数据 存储 技术 ,给 聊天 增加 聊天 历史 记录 查看 。 
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地 理 位 置 和 其 他 传感器 实验 


33.1 实验 目的 


(1) 了 解 地 理 位 置 API。 

(2) 了 解 Camera API。 

(3) 理解 Canvas API。 

(4) 理解 File API。 

(5) 了 解 百 度 地 图 接口 。 

(6) 学 习 通 过 手机 本 地 测试 应 用 。 


33.2 ”实验 环境 与 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 

(2) Firefox 浏览 器 、 搜 狗 浏 览 器 。 

(3) Brackets 代码 编辑 器 。 

(4) WAMP 服务 器 。 

(5) Android 或 iPhone 手机 平板 电 脑 或 笔记 本 电脑 。 


33.3 ”实验 方法 


33.3.1 编写 一 个 应 用 


编写 一 个 应 用 ,可 以 拍照 并 将 地 理 位 置信 息 写 在 照片 里 面 。 主 要 方法 如 下 。 
(1) 通过 navigator. geolocation 对 象 的 getCurrentPosition() 获 取 地 理 位 置信 息 。 
(2) 通过 百度 、 高 德 等 地 图 接口 ,显示 拍照 地 点 的 地 图 链接 。 例 如 ,百度 地 图 调用 接口 : 
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window. location= "http://api. map. baidu. com/marker?location 一 ”十 lat 十 "十 lon 十 "; 
(lat= latitude,lon=longitude) 。 

(3) 通过 navigator. devices. getUserMedia() 获 取 视 频 信息 video。 具 体 见 22 章 例 子 
22-1, 或 参考 https://developer. mozilla. org/zh-CN/docs/Web/API/MediaDevices/ 
getUserMedia 。 

(4) 通过 画布 的 drawImage(video，0, 0, 640, 480) ,将 视频 变 成 图 片 。 

(5) 通过 Canvas 画布 的 文本 输出 函数 写 地 理 位 置信 息 。 

(6) 通过 File API 保存 照片 。 


33.3.2 测试 


测试 地 理 位 置信 息 ,不 同 运行 环境 会 得 到 不 同 结果 ,如 果 在 PC 上 做 测试 ,浏览 器 会 通 
过 IP 地 址 来 获取 位 置信 息 , 精 度 不 高 ,而 且 一 些 浏 览 器 ,如 Opera 和 Chrome 需要 通过 
https: //www. googleapis. com 谷歌 服务 器 获取 IP 位 置信 息 , 由 于 中 国 无 法 访问 谷歌 服务 
器 ,所 以 会 产生 错误 信息 。 如 果 要 在 PC 上 测试 ,选择 中 国 本 土 的 浏览 器 ,例如 搜狗 浏览 器 ， 
会 得 到 不 错 的 结果 ,建议 用 有 GPS 功能 的 手机 测试 ,并 且 成 功率 会 更 高 。 还 有 一 个 值得 注 
意 的 问题 是 一 些 浏览 器 强制 采用 https 安全 协议 访问 地 理 位置 息 ,而 搭建 https 安全 协议 的 
服务 器 比较 复杂 ,建议 选择 不 同 的 浏览 器 做 测试 ,目前 搜狗 浏览 器 比较 完好 地 解决 上 述 问 
题 。 关 于 摄像 头 接口 测试 ,建议 在 有 摄像 头 的 笔记 本 电脑 ,平板 电脑 或 手机 上 测试 。 以 上 测 
试 过 程 ,必须 将 代码 放 到 Web 服务 器 上 。 
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34.1 实验 目的 


(1) 下 载 开 源 的 JSMatchismo-master 游戏 代码 。 
(2) 根据 游戏 规则 读 懂 、 分 析 游 戏 源 代码 。 
(3) 安装 、 运 行 游戏 。 


34.2 实验 环境 与 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 
(2) Firefox 浏览 器 。 
(3) Brackets 代码 编辑 器 。 


34.3 实验 方法 


斯 坦 福 大 学 的 在 线 课 程 编程 游戏 样板 代码 的 下 载 地 址 为 : https://github. com/ 
zchan0/Matchismo。 解 压 , 直 接 打开 浏览 器 ,本 地 运行 。 


34.3.1 游戏 规则 
每 次 翻转 扣 一 分 ,每 次 不 匹配 扣 三 分 ,花色 或 数字 匹配 增加 三 分 。 


34.3.2 源码 分 析 

阅读 源码 ,解释 一 些 关键 技术 ,也 可 以 通过 Firefox 浏览 器 开发 者 工具 的 “查看 器 ”查看 
HTML 元 素 和 CSS 之 间 的 关系 ,通过 “调试 器 ”查看 和 调试 运行 中 的 JavaScript 代码 ,样式 
编辑 器 ”窗口 CSS 文件。 
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PhoneGap 制 作 Hybrid App 实 验 


35.1 实验 要 求 


(1) 学 会 安装 Java SE JDK ,设置 系统 环境 变量 。 

(2) 学 会 安装 Node. js。 

(3) 通过 NPM 安装 PhoneGap 和 Cordova。 

(4) 学 习 PhoneGap/Cordova 创建 App 项 目 。 

(5) 在 浏览 器 中 调试 运行 项 目 。 

(6) 安装 Android SDK 或 Android Studio 工具 ,相应 开发 插件 和 Android 模拟 器 。 
(7) 编译 App 项 目 , 并 在 Android SDK 模拟 器 下 运行 ,调试 。 

(8) 将 第 23 章 写 好 的 相机 代码 转换 成 Android 原生 应 用 。 

(9) 在 手机 端 运行 调试 应 用 。 





35.2 ”实验 环境 与 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 
(2) Firefox 浏览 器 。 

(3) Brackets 代码 编辑 器 。 

(4) Java SE SDK 开发 包 。 

(5) Node. js。 

(6) Android SDK 或 Android Studio。 

(7) Android 或 iPhone 手机 。 
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35.3 ”实验 方法 


35.3.1 Java SDK 开发 环境 的 安装 


PhoneGap/Cordava 框架 的 Hybrid 混合 App 开发 需要 用 到 Java SDK 开发 包 , 所 以 ,我 
们 的 实验 环境 搭建 就 从 这 里 开始 。 首 先 ,从 官网 https://www. java. com/en/download/ 
windows-64bit. jsp 下 载 最 新 版 的 Windows 操作 系统 安装 包 , 我 们 选择 1. 8.0 版 本 。 按 照 
向 导 安装 好 后 ,配置 系统 环境 变量 如 下 。 

(1) JAVA_HOME=[ 安 装 目 录 ]。 

(2) CLASSPATH 变量 中 加 入 “*;%JAVA_HOME%\jre\lib\rt. jar; %JAVA_ 
HOME%\lib\tools. jar; WJAVA_HOME%\lib\dt. jar” 。 

(3) PATH 变量 中 加 入 *;%JAVA_HOME%\bin。 

打开 Windows 命令 行 窗口 ,输入 “java -version”, 可 以 看 到 版 本 号 ,表示 安装 配置 正确 。 


35.3.2 ”Node.js 下 载 安装 


从 官网 https://nodejs. org/en/download/ 下 载 Node. js 的 Windows Installer 版 本 , 按 
照 安 装 向 导 安 装 后 有 两 个 程序 ,一 个 是 Node. js, 是 JavaScript 即时 运行 窗口 , 另 -个 是 
Command Prompt 命令 行 窗口 ,是 用 于 Node. js 的 管理 命令 执行 窗口 ,例如 npm 包 模 块 管 
理 命 令 。 

打开 Node.js 的 Command Prompt 命令 行 窗口 ,输入 “node -v”, 可 以 看 到 版 本 号 ,表示 
安装 正确 。 

JavaScript 代码 通过 node 解释 器 执行 。 打 开 Windows 命令 行 ,执行 node 命令 后 回 车 
出 现 :“>” 提 示 符 后 ,可 以 输入 JavaScript 代码 ,并 实时 执行 ,如 图 35-1 所 示 。 


画 "ode 


our environment has been set up for using Node.js 6.19.2 (x64) and npm. 


:\Users\Joe Zhou>node 
> console. log("Hello World"); 





图 35-1 node 解释 器 
退出 解释 器 , 按 Ctrl 十 D 组 合 键 。 


35.3.3 安装 Cordova 和 PhoneGap 
打开 Node. js 命令 行 窗 口 , 先 安装 Cordova ,命令 如 下 ,@latest 表示 安装 最 新 版 本 。 





npm install - g cordova@latest 











安装 命令 的 执行 结果 如 图 35-2 所 示 。 
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:MUsersNhgzhoynpm install -g cordova 
pe deprecated node-uuid81.4.8: Use uuid module i 
\Users\hgzho\AppData\Roaming\npa\cordova -> C:\Users' 
5: \Users\hgzho\AppData\Roaming \npm 
cordovaB6.5.9 
cordova-common82.9.9 
+-- ansi8e.3.1 
+-- bplist-parserge.1.1 
| --- big-integer81.6.22 
+-- cordova-registry-mapper@1.1.15 
+-- elementtreeBe-1-7 
1 saxB1.1.4 
+-- Elob85.9.15 
inflight@1.0.6 
wrappyB1.0.2 
inherits82.0.3 
once8@1.4.9 
path-is-absolute81.6.1 
minimatch83-9.3 
brace-expansion@1.1.7 
balanced-match8e.4.2 
-- concat-map8Be-9.1 
-- osenv8e.1.4 


+-- 05-homedi 





图 35-2 ”Cordova 安装 过 程 


再 安装 最 新 版 本 的 PhoneGap 命令 : 





npm install — g phonegap@1latest 





安装 结果 如 


5: \Users\hgzho>npe install -g phonegap 
ated node-uuidB1.4.8: Use uuid module inst 
ated tough-cookieB2.2.2: ReDoS vulnerabili 

:\Users\hgzho\AppData\Roaming \npm\phonegap -> C:\Users\hl 

:\Users\hgzho VppData\Roaming \npm 

| -- phonegap86.5.9 

+-- archiverBl1.3.9 

| +-- archiver-utils@1.3.0 

| | +-- lazystrean81.6.9 

| | `-- normalize-path82.1.1 

1 remove-trailing-separator8l1.9.1 

1 async8B2.4.9 

| buffer-crc3289.2.13 

| Elob87.1.1 

| fs.realpath8l1.6.9 

| inflight81.0.6 

1 wrappyB1.0.2 

1 inherits82.0.3 

1 -- minimatchg3.0 

1 “-- brace-expansion81.1.7 

1 LE 

1 concat-map88.0.1 

1 onceB1.4.9 

1 path-is-absolute81.9.1 





图 35-3 PhoneGap 安装 过 程 
在 Node.js 命令 行 窗 口中 执行 : phonegap -v 或 cordova -v, 可 以 看 到 PhoneGap 和 
Cordova 的 版 本 提示 信息 。PhoneGap 和 Cordova 的 版 本 号 都 是 一 样 的 。 


35.3.4 创建 helloworld 应 用 


打开 Windows 命令 行 窗口 ,创建 一 个 PhoneGap 的 项 目 目录 ,执行 “md phonegaps” 命 
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今 , 进 入 项 目 目 录 “cd phonegaps”, 创 建 一 个 helloworld 项 目 , 输 入 : 





phonegap create myapp 











在 phonegaps 目录 下 会 生成 一 个 项 目 目录 为 myapp。 通 过 PhoneGap 和 Cordova 创建 
的 项 目 , 文 件 目录 结构 略 有 区 别 , 分 别 见 图 35-4 和 图 35-5。 


名 隐 修改 日 期 类 型 大 小 
| 站 hooks 2017/4/30 21:35 文件 夹 
platforms 2017/4/30 21:35 文件 夹 
plugins 2017/4/30 21:35 。 文件 夹 
ww 2017/4/30 21:35 文件 夹 
.bithoundrc 2017/4/30 21:35 BITHOUNDRC 文 … 2KB 
2 configxml 2017/4/30 21:35 。 XML 文档 9KB 
CONTRIBUTING.md 2017/4/30 21:35 MD 文件 1KB 
| 回 READMEmd 2017/4/30 21:35 MD 文件 3KB 


图 35-4 ”PhoneGap 创建 的 项 目 结构 





各 称 修改 日 其 类 型 大 小 
hooks 2017/4/30 21:37 。 文件 夹 

platforms 2017/4/30 21:37 文件 夹 

plugins 2017/4/30 21:37 文件 实 

站 www 2017/4/30 21:37 。 文件 实 
| 9 configxml 2017/4/30 21:37 。 XML 文档 1KB 





图 35-5 ”Cordova 创建 的 项 目 结构 


项 目的 共同 点 是 有 一 个 配置 文件 config. xml,www 目录 下 面 是 我 们 的 所 有 开发 的 代码 
文件 ,项 目 必须 有 一 个 默认 的 首页 文件 index. html, 从 项 目 文件 结构 可 以 看 到 ,PhoneGap 
和 Cordova 创建 的 项 目 。PhoneGap 添加 了 自己 的 一 些 扩 展 。platforms 目录 是 项 目 添加 支 
持 的 移动 操作 系统 平台 存放 相应 文件 的 地 方 ,一 个 应 用 可 以 由 用 户 添 加 不 同 的 应 用 平台 
支持 。 


35.3.5 添加 应 用 平台 


用 “cd” 命 令 进 入 创建 的 项 目 目录 ,添加 Android 应 用 平台 ,就 是 为 应 用 添加 支持 该 平台 
的 所 有 插件 ,命令 如 下 : 





phonegap platform add android 





执行 完 后 可 以 在 项 目 目 录 platforms 下 看 到 添加 了 android 目录 ,里 面 添加 了 相应 
Android 文件 支持 。 为 了 调试 需要 ,也 要 添加 一 个 浏览 器 平台 ,命令 如 下 : 











phonegap platform add browser 
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35.3.6 在 浏览 器 端 调 试 App 应 用 
在 创建 的 目录 下 面 , 执 行 命令 ， 








phonegap run browser 








相当 于 启动 一 个 Web 服务 器 ,并 自动 打开 一 个 默认 浏览 器 ,hello world 项 目的 浏览 器 
界面 如 图 35-6 所 示 。 





» GC | © localhost:8000/index html 








图 35-6 ”运行 在 浏览 器 端的 hello world 项 目 


访问 的 URL 地 址 为 http://localhost:8000/index. html, 要 关闭 Web 服务 器 ,在 命令 
行 窗口 中 按 Ctrl 十 C 组 合 键 ,终止 Web 服务 器 。 
如 果 要 编译 打包 成 Android 的 APK 应 用 ,还 需要 安装 Android SDK 开发 包 。 


35.3.7 安装 Android SDK 开发 工具 包 


安装 Android Stand-alone SDK Tools 基本 上 可 以 完成 PhoneGap 的 打包 编译 要 求 , 没 
有 必要 安装 Android Studio 工具 。 不 同 的 Cordova 版 本 支持 不 同 的 Android 版 本 。 这 里 安 
装 的 是 Cordova 6. 50 版 ,可 以 支持 Android 的 API-levels 16 一 25, 相 当 于 Android 4. 11 一 
7. 11 的 版 本 。Android SDK tool 安装 好 以 后 有 两 个 工具 ,一 个 是 SDK Manager, 用 来 安装 
管理 不 同 版 本 的 Android API 开发 包 , 一 个 是 ADV Manager, 用 来 管理 设置 Android 模 
拟 机 。 

安装 好 的 Android SDK 要 设置 系统 环境 变量 : 

(1) ANDROID_HOME= 二 [Android SDK 安装 目录 ]。 

(2) Path= ; %ANDROID HOME%\tools; % ANDROID HOME%\platform-tools。 

SDK Manager 安装 相应 的 系统 映像 文件 和 编译 支持 插件 。 打开 SDK Manager, 在 
Tools 选项 下 面 ,选择 所 有 Android SDK tools, Android SDK platform-tools, Android SDK 
build-tools 安装 。 

这 里 准备 安装 Android 6. 0 模拟 器 ,所 以 ,在 Android 6. 0(API 23) 下 面 ,选择 SDK 
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Platform 和 Intel x86 Atom_64 System Image( 系 统 映像 文 件 ) ,如 图 35-7 所 示 。 





~ DG Android 6.0 (AP123) 

挤 SDK Platform 23 3 厄 Installed 
Android TVARM EAB/v7a System1! 23 3 ODNotinstalled 
Android TV Intelx86 Atom System 23 9 ONotinstalled 
国 Android Wear ARM EABI v7a Syste! 23 OD Wot installed 















































Android Wear Intel x86 Atom Syste 23 Wot installed 
a ARM EABI v7a System Image 23 SD Nor installed 
Intelx86 Atom_64 System Image 23 区 Installed 








6 

6 

6 

9 
Inte/ x86 Atom System Image 23 9 DWNotinstalled 
Google APIs ARM EABIv7a System 23 20 区 Installed 
EE 
20 
1 
1 














Mm Goog/e 4ps Inte/ x86 Atom 64 Sys 23 Not installed 
Google APis Intel x86 Atom Systen 23 DWot installed 
党 Google AP 23 芭 Installed 

个 sources for Android SDK 23 





























展 Installed 














图 35-7 Android 6.0 系统 映像 文件 安装 


在 Extras 选项 下 面 ,选择 所 有 的 安装 包 , 最 后 一 个 选项 是 Intel x86 Emulator 
Accelerator(HAXM Installer) ,这 是 为 Android 模拟 器 针对 Intel CPU 的 加 速 的 驱动 ,必须 
安装 ,并 且 这 里 要 求实 验 开发 环境 是 Windows 系统 ,CPU 是 Intel 系列 。 如 果实 验 环境 不 
是 Intel 系列 CPU ,或 者 CPU 不 兼容 HAXM 驱动 ,可 以 安装 ARM System Image 系统 映像 
文件 ,但 是 ,模拟 器 的 速度 是 当前 机 器 10x 倍 以 下 的 速度 ,所 以 建议 不 用 。 


35.3.8 通过 AVD Manager 安装 一 个 模拟 器 


我 们 可 以 安装 不 同 版 本 的 Android 模拟 器 ,但 是 ,必须 在 SDK Manager 工具 下 事先 下 
载 安装 相应 的 系统 映像 文件 。 这 里 是 安装 Android 6. 0 的 模拟 器 。 单 击 Create 按钮 ,创建 
一 个 模拟 器 ,并 输入 下 面 的 参数 ,如 图 35-8 所 示 。 


Edit Android Virtual Device (AVD) x 





















































AVD Name: ndroid6.0 

Device: [Nexus 5 (4.95", jyoxhd ~ 
Target: ~ 
CPU/ABF Intel Atom (x86 64) I 
Keyboard: 回 Hardware keyboard present 

Skin: Skin with dynamic hardware controls ~ 
Front Camera: [Emulated ~ 
Back Camera: Emulated ~ 
Memory Optione | RANE [2048 VM Heap: [64 

















Internal Storage: [200 MB 














SD Card: 





@ she: Mie 


























35-8 Android 6.0 模拟 器 的 创建 设置 
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单 击 Start 按钮 启动 模拟 器 ,可 以 看 到 一 个 Android 的 屏幕 和 工具 栏 ,如 图 35-9 所 示 。 





Android Emulator - Android6.0:5554 




















图 35-9 模拟 器 的 界面 


35.3.9 在 模拟 器 上 运行 helloworld 项 目 


打开 Windows 命令 行 窗 口 ,执行 下 面 的 命令 





cordova emulate android 





这 个 命令 会 打包 ,编译 项 目 , 并 把 编译 好 的 Debug 测试 APK 文件 安装 到 模拟 器 执行 。 
命令 行 窗 口 的 执行 结果 如 图 35-10 所 示 。 


SUCCESSFUL 


uilt the Fa re apk(s): 

ho/Desktop/phonegap/myapp1/platform: id/build/outputs/apk/android-debug.apk 
ANDROID_HOME=C: \ ho\AppData\Local\Android\android 
DAVA_HOME=C: \Program Files\Java\idk1.8.8 111 


Skipping build... 
Built the following apk 
ho/ p/phonegap/myapp1/platforms/android/build/outputs/apk/android-debug.apk 
Users/hgzho/Desktop/phonegap/myapp1/platforms/android/buil puts/apk/android-debug.apk 
m. phonegap.helloworld 


NsTALL SUCC 
LAUNCH SUCCESS 





图 35-10 项 目 成 功 执行 模拟 器 运行 的 命令 行 窗 口 信息 
helloworld 项 目 在 模拟 器 中 的 运行 效果 如 图 35-11 所 示 。 
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Android Emulator - Android6.0:5554 


B 人 


| 多 


PHONEGAP 





OA 用 





口 


图 35-11 helloworld 项 目 运行 在 模拟 器 上 


35.3.10 在 手机 环境 下 运行 helloworld 项 目 
手机 通过 USB 连接 到 开发 计算 机 上 ,在 计算 机 上 的 Windows 命令 行 窗 口 下 执行 命令 : 





phonegap run android 











正常 情况 下 ,会 打包 编译 ,并 把 APK 文件 安装 到 连接 的 手机 上 ,如 果 自 动 安装 失败 ,可 
以 把 项 目 生成 的 APK 文件 (在 项 目 目 录 下 myapp\platforms\android\build\outputs\apk\ 
android-debug. apk) 手 动 复 制 到 手机 的 download 文件 夹 下 ,通过 手机 的 文件 管理 器 ,找到 
android-debug. apk, 单 击 安装 到 手机 ,并 启动 ,可 以 查看 手机 的 运行 效果 ,如 图 35-12 所 示 。 


@ros 5:09PM 省 国 


PHONEGAP 
[EvCES READY ‘Eo 


图 35-12 在 手机 上 运行 helloworld 项 目 应 用 的 效果 
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35.4 实验 拓展 


按照 上 面 的 实验 方法 ,请 完成 23 章 例子 23-1 的 照相 机 应 用 项 目的 打包 、 编 译 、 测 试 。 
或 到 PhoneGap 官网 ,下 载 摄像 头 演示 源 代 码 : http://docs. phonegap. com/en/edge/ 
cordova_camera_camera. md. html, 打 包 、 编 译 、 测 试 。 
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全 栈 Web 开 发 实验 


36.1 实验 目的 


(1) 学 习 Node.js 的 安装 ,用 Node.js 编写 一 个 最 简单 的 HTTP 服务 器 代码 。 

(2) 通过 浏览 器 测试 观察 HTTP 的 请 求 ,响应 信息 ,理解 Node.js 的 工作 原理 。 

(3) 学 习 编 写 一 个 简单 的 AngularJS 框架 应 用 ,学 会 编写 模板 .模块 .路 由 、 控 制 器 
代码 。 

(4) 学 习 MongoDB 数据 库 安装 使 用 。 


36.2 实验 环境 与 工具 


(1) 安装 Windows 10 64 位 操作 系统 的 计算 机 。 
(2) 后 端 框架 Node.js。 

(3) 前 端 框架 AngularJS。 

(4) NoSQL 数据 库 MongoDB。 

(5) Brackets 代码 编辑 器 。 


36.3 ”实验 方法 


36.3.1 安装 运行 Node.js 解释 器 

通过 Node.js 官网 (https://nodejs. org) 或 中 文官 网 (http://nodejs. cn/) 下 载 Node. js 
最 新 版 本 。 所 有 的 模块 / 包 管理 是 由 Node. js 的 包 管 理 器 npm 下 载 安装 ,这 些 模块 / 包 是 开 
源 的 ,也 是 全 球 最 大 的 开源 库 生 态 系统 。 具 体 安装 见 第 35 章 内 容 。 
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36.3.2 一 个 最 简单 的 HTTP 服务 器 


编写 一 个 最 简单 的 HTTP 服务 器 代码 webserver. js, 打 开 Windows 命令 行 ,通过 “cd” 
命令 进入 到 webserver. js 所 在 目录 ,执行 命令 : 





node webserver. js 











可 以 看 到 服务 器 已 经 启动 ,如 图 36-1 所 示 。 





36-1 HTTP 服务 器 启动 


打开 IE 浏览 器 ,在 地 址 栏 中 输入 “http://localhost: 8000”, 并 打开 开发 者 工具 的 
Network 项 ,查看 HTTP 的 请 求 和 响应 头 , 如 图 36-2 所 示 。 





| Headers Body Parameters Cookies Timings 
Request URL: httpy/localhost8000/ 

Request Method: GET 

Status Code: 图 200/ OK 

4 Request Headers 

Accept text/html, application/xhtml+xml, image/jxr, */* 
Accept-Encoding: gzip, deflate 

Accept-Language: en-US, en; q=0.8, zh-Hans-CN; q=05 
Connection: Keep-Alive 

Host localhost:8000 

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 
4 Response Headers 

Connection: keep-alive 

content Length: 21 

content Type: text/plain 

Date: Wed, 31 May 2017 09:35:06 GMT 


Transfer-Encoding: chunked 














图 36-2 浏览 器 端 检 查 HTTP 请 求 和 响应 头 


36.3.3 一 个 简单 的 AngularJS 框架 应 用 

创建 一 个 项 目 目录 angularjs, 在 其 项 目下 创建 以 下 目录 : css .html images 和 js。 

打开 https://code. angularjs. org/ ,下载 AngularJS 库 文件 angular-1. 5. 8. zip, 里 面包 
含 所 有 的 模块 。 在 html 目录 下 创建 index. html， 


36.3.4 ”MongoDB 数据 库 安装 

通过 官网 https://www. mongodb. com/download-center community 下 载 最 新 版 本 ， 
或 者 到 http://dl. mongodb. org/dl/win32/x86_64 选择 不 同 版 本 下 载 。 我 们 选择 版 本 3. 4 
Windows 安装 64 位 版 。 
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安装 好 后 ,进行 系统 环境 变量 设置 : 

(1) 将 安装 目录 C:\Program Files\ MongoDB\ Server\3.4 添加 到 系统 环境 变量 
MONGODB_HOME 里 。 

(2) 添加 “%MONGODB_HOME%\bin” 到 path 系统 环境 变量 里 。 

这 样 我 们 就 可 以 在 任何 目录 下 面 执行 mongodb 的 命令 。 

数据 库 目录 结构 设置 如 下 。 

(1) 创建 数据 库存 放 目 录 : C:\mongodb\data\db。 

(2) 创建 日 志 目 录 : C:\mongodb\data\logs。 

启动 数据 库 , 打 开 Windows 命令 行 cmd. exe, 输 入 下 面 的 命令 。 





mongod -—- dbpath "C:\mongodb\data\db" —- logpath "C:\ mongodb\logs\mongodb. 1og" 





由 于 这 个 命令 太 长 ,可 以 把 参数 存放 到 配置 文件 mongodb. config 中 ,文件 内 容 如 下 。 





dbpath = C:\mongodb\data\db 
logpath = C:\mongodb\data\logs\mongodb. 1og 





启动 命令 变 成 : 





mongod —- config c:\mongodb\mongo. config 











启动 后 的 信息 可 以 看 到 *I CONTROL…”。 启 动 后 , Windows 命令 行 窗口 处 于 等 待 状 
态 ( 没 有 提示 符 出 现 了 ) ,但 不 可 以 把 这 个 窗口 关闭 ,可 以 缩小 到 系统 任务 栏 保留 。 

或 者 ,还 可 以 以 Windows 服务 进程 方式 启动 ,让 MongoDB 在 后 台 运 行 ,这 样 ,运行 的 
窗口 可 以 关闭 。 命 令 如 下 。 





mongod —— dbpath "C:\mongodb\data" —— logpath "C:\ mongodb\ logs\mongo. 10g" —- install —-— 
servicename mongodb 











36.3.5 MongoDB 的 后 台 管 理 


(1) 打开 Windows 命令 行 窗口 ,执行 mongo 命令 ,进入 数据 库 命 令 操 作 控 制 台 窗口 , 提 
示 符 是 “>”( 前 面 没有 文件 目录 了 ) ,可 以 输入 MongoDB 的 数据 库 操 作 命 令 。 控 制 台 除 了 
MongoDB 的 命令 外 ,还 可 以 执行 JavaScript 代 
码 。 如 图 36-3 所 示 是 控制 台 启动 的 界面 。 
连接 的 数据 库 地 址 是 mongodb://127. 0. 0. 
:27017 ,也 可 以 通过 浏览 器 地 址 访问 : http:// 图 36-3 MongoDB 数据 库 管理 命令 窗口 
27.0.0.1:27017 ,浏览 器 会 返回 下 面 的 信息 。 








It looks like you are trying to access MongoDB over HTTP on the native driver port. 
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(2) 创建 数据 库 mydb, 如 果 没 有 就 创建 ,有 就 切换 到 数据 库 , 同 时 生成 一 个 默认 的 数据 
库 实 例 对 象 db ,命令 如 下 。 





use mydb 





(3) 创建 一 个 集合 users, 相 当 于 传统 数据 库 的 表 , 命 令 如 下 。 











db. createCollection( "users") 





(4) 插入 一 个 文档 (Document) 到 集合 users, 这 里 是 直接 写 入 一 个 JSON 格式 的 对 象 ， 
如 果 集 合 不 存在 , 它 会 自动 创建 ,并 完成 插入 ,代码 如 下 。 











db. users. insert( {user_id: '001', name: 'joe zhou', password: '12345'}) 





(5) 查询 数据 ,代码 如 下 ,可 以 在 人 } 中 指定 查询 的 键 / 值 对 ,一 个 或 多 个 ,如 果 为 空 , 则 查 
询 所 有 文档 。 











db. users. find({}) 





每 次 插入 数据 时 ,如 果 没 有 ”_id” 属 性 定义 ,MongoDB 会 自动 为 对 象 生成 此 属性 和 生成 
一 个 值 。 查 询 结果 如 下 。 





{ "_id" : ObjectId("598338cc331fb61a90d81b3f")，"user_id"”: "001", "name" : "joe zhou", 
"password" : "12345" } 
{ "_id" : ObjectId("5983399f331fb61a90d81b40"), "user_id" : "002", "name" : "Mark zhang", 
"password” : "11111" } 











(6) 删除 数据 ,{} 里 面 可 以 指定 一 个 键 / 值 对 来 匹配 要 删除 的 文档 ,如 果 为 空 , 则 删除 所 
有 文档 数据 。 





db. users. remove({}) 





(7) 停止 MongoDB 数据 库 服务 , 先 切换 到 admin 数据 库 : 





use admin 





执行 关闭 数据 库 服务 命令 : 





db. shutdownServer( ) 











(8) 退出 数据 库 管理 控制 台 ,执行 exit 命令 。 
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36.4 实验 拓展 


在 第 25 章 全 栈 开 发 MEAN 代码 中 ,在 AngularJS 前 端 使 用 了 $http 对 象 来 完成 
RESTful API 的 接口 ,是 一 种 在 HTTP 底层 的 实现 。 其 实 ,AngularJS 还 提供 $ resource 对 
象 专门 为 RESTful 设计 的 高 层 实现 。 请 用 $ resource 服务 重 写 MEAN 的 代码 。 在 本 地 机 
调试 成 功 后 ,可 以 尝试 部 署 应 用 到 支持 Node. js 和 MongoDB 的 云 平 台 , 例 如 , Heroku、 
Windows Azure、NodeJitsu, 这 些 平台 都 提供 免费 试用 。 
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学 习 网 站 


HTML 在 线 学 习 : http://www. w3school. com. cn/html/index. asp 
CSS 在 线 学 习 : http://www. w3school. com. cn/css/index. asp 

HTML 5 在 线 学 习 : http://www. w3school. com. cn/html 5/index. asp 
CSS3 在 线 学 习 : http://www. w3school. com. cn/css3/index. asp 
PhoneGap 中 国 社区 : http://bbs. phonegapcn. com/ 

BootStrap 中 文 网 : http://www. bootcss. com/ 

菜鸟 驿站 : http://www. runoob. com/ 


术语 解释 


1 


DPI(Dots Per Inch) ,每 英寸 点 数 ,是 打印 机 、 扫 描 仪 、 鼠 标 等 设备 精度 的 量度 单位 ,是 指 
数字 化 影像 每 一 英寸 长 度 中 ,输出 、 取 样 、 定 位 或 显示 点 的 数目 。DPT 值 越 高 ,表明 打印 
机 的 打印 精度 越 高 ,扫描 更 精细 ,鼠标 定位 更 准 。 

CDN(Content Delivery Network ,内 容 分 发 网 络 ) 是 在 用 户 和 服务 器 之 间 增 加 Cache 层 。 
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通过 访问 离 客 户 端 最 近 的 缓存 服务 器 ,可 以 加 快 服务 速度 。 

Open Web Standard: 由 开放 式 Web 平 台 (Open Web Platform) 结 合 多 项 技术 标准 联盟 

的 W3C 标准 。 

WAI-ARIA(Web Accessibility Initiative-Accessible Rich Internet Applications ,无 障碍 

网 页 增强 ) : 主要 针对 的 是 视觉 .听力 ,行动 不 便 的 残疾 人 ,网 页 浏览 需 通 过 辅助 设备 ,如 

屏幕 阅读 器 、 屏 幕 阅读 机 转换 成 声音 或 者 输出 盲文 。 

SEO(Search Engine Optimization) ,搜索 引擎 优化 ,是 通过 搜索 引擎 的 搜索 规则 来 优化 

网 页 的 内 容 结构 和 关键 词 等 方式 ,让 搜索 引擎 更 容易 分 析 理 解 我 们 的 网 站 ,提高 网 站 搜 

索 排名 ,同时 ,也 能 让 用 户 更 容易 发 现 我 们 的 网 站 ,达到 网 站 推广 营销 目的 。 

OpenGL(Open Graphics Library) 是 一 个 绘图 技术 标准 , 跨 编程 语言 . 跨 平 台 、 与 硬件 无 

关 的 图 型 库 编 程 接口 的 规范 (包括 2D、3D), OpenGL ES (OpenGL for Embedded 

Systems) 是 OpenGL 图 形 API 的 子 集 ,主要 用 来 开发 姐 入 式 设备 和 移动 设备 的 图 形 接 

口 , 最 新 版 本 是 OpenGL ES 3.0。 

Base64 编码 ,是 一 种 将 二 进 制 数据 包 按 8b 为 一 个 字 节 转换 成 字符 串 数据 包 的 编码 方 

式 , 字 符 串 数据 包 由 64 个 字符 (英文 大 小 写 .数字 和 十 ./) 以 及 用 作 后 组 等 号 组 成 。 主 要 

目的 是 解决 二 进 制 数据 包 转 换 成 看 见 的 字符 串 的 方式 传输 ,解决 网 络 设备 在 数据 交换 过 

程 中 ,处 理 非 字 符 编 码 不 一 致 问题 。 

Data-URL, 是 将 文件 流转 换 成 Base64 编码 ,打包 成 看 见 的 字符 串 数据 包 ,让 HTML 页 面 的 元 

素 可 以 直接 加 载 并 识别 的 数据 格式 ,而 不 需要 从 服务 器 请 求 下 载 。 例 如 ,< img > 元 素 要 加 载 

图 片 源 ,可 以 预先 将 图 片 文件 转换 成 Base64 编码 ,再 按照 Data-URL 的 数据 格式 ,直接 赋值 给 

src 属性 ,< img src 二 "data: image/ gif; base64, ERDKwreowrjk232ew23edWERD = 一”/>， 

这 样 ,就 不 用 访问 服务 器 下 载 图 片 ,直接 显示 图 片 。 当 然 ,这 种 方式 ,要 求 图 片 相对 小 , 否 

则 ,转换 出 来 的 Base64 编码 太 长 ,破坏 网 页 的 可 读 性 。 

DOMString ,是 指 JavaScript 默认 的 UTF-16 字符 串 编码 ,是 一 个 字符 串 对 象 。 
same-origin policy( 同 源 策略 ): 是 浏览 器 的 一 个 安全 策略 ,浏览 器 的 一 个 页 面 脚本 要 
访问 另 一 个 页 面 的 数据 ,必须 要 求 另 一 个 页 面 是 来 自 于 同一 个 域 ,这 个 域 包括 : 域名 十 
端口 号 十 URI。 这 个 安全 策略 防止 恶意 代码 从 一 个 页 面 去 访问 或 自 改 另 一 个 不 同 域 的 
页 面 。 

SDK(Software Development Kit, 软 件 开 发 工具 包 ) 是 针对 某 一 特定 的 软件 包 、 软 件 框 
架 , 硬 件 平台 、 操 作 系 统 等 建立 应 用 软件 的 开发 工具 。 

JSX 是 一 种 静态 类 型 的 、 面 向 对 象 的 编程 语言 ,允许 用 户 像 写 Java 一 样 通过 class 定义 
类 ,JSX 编译 器 最 终 将 JSX 语言 编译 成 JS 代码 ,并 可 以 运行 于 现代 浏览 器 中 。 
MVVM(Model-View-ViewModel) 是 在 MVC(Model-View-Control) 模 式 上 改进 的 新 
开发 模式 ,其 原理 是 把 视图 (界面 ) 和 数据 进行 解 看 独立 开 来 ,MVC 把 view 层 的 数据 
变化 通过 事件 传 给 控制 层 Control, 而 MVVM 不 同 的 是 采用 ViewModel 来 完成 数据 
与 视图 的 双向 绑 定 动态 更 新 ,替代 了 MVC 的 Control 层 。 
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